前端——》通过nginx和Apache两种方式部署vue前端项目

一:通过nginx部署

我们默认linux服务器上已经安装好nginx环境,我将vue编译的dist文件夹放到了 /root/build/x-frontend-manage目录下

步骤一:编写nginx配置文件

找到nginx的安装目录,注意不是nginx软件包的存放目录,如下图所示
前端——》通过nginx和Apache两种方式部署vue前端项目_第1张图片
到conf目录下 执行vi nginx.conf


user  root; # 此处需要修改为root
worker_processes  1;

pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       9999; # 此处改为vue程序启动的端口号
        server_name  127.0.0.1; # 此处改为服务器所在的外网ip
     	root         /root/build/x-frontend-manage/dist;  # 此处改为vue编译后文件的存放路径
        location / {
            try_files $uri $uri/ /index.html;
	    }

	   location /api {   
            proxy_pass http://127.0.0.1:9088;  # 此处改为vue程序启动的后端接口地址       
	        proxy_set_header   X-Forwarded-Proto $scheme;
      	    proxy_set_header   Host              $http_host;
            proxy_set_header   X-Real-IP         $remote_addr;
     	}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

步骤二:启动

配置文件改好后
执行
./nginx -s start 命令启动nginx。
当后续部署需要改动dist文件夹下的内容时,执行
./nginx -s reload 方式就可以了。
nginx启动后 ps -ef|grep nginx 可以看到有两个相关的nginx进程,说明nginx启动成功
在这里插入图片描述

此时需要检查nginx.conf文件中监听的端口号是否有通过防火墙,即可外网通过 ip+端口号的方式访问部署的vue项目了。

二:通过Apache部署

我们默认linux服务器上已经安装好Apache环境

步骤一:修改配置文件

需要修改两个配置文件,第一个是
/etc/httpd/conf下的httpd.conf文件
第二个是我们的自定义虚拟主机配置文件
① 文件一httpd.conf文件:
这个文件需要改的东西如下

# 第一处
Listen 9999 # 监听9999端口,如果此处已经配置了其他监听端口如Listen 8000,那么另起一行写Listen 9999,不要把之前的替换了
#第二处
<Directory /> #只改这一个Directory ,其他的什么的不用改,因为我的编译文件不放在/var/www这些目录下,改了没用
    AllowOverride All    # AllowOverride 的值改为All
    Require all granted  # Require all 的值改为granted  
</Directory>
#第三处
<Files ".ht*">
    Require all granted  # Require all 的值改为granted
</Files>
#第四处,增加一行代码,将其他文件夹下的配置兼并过来
IncludeOptional sites-enabled/*.conf

②在/etc/httpd/sites-enabled目录下新增一个文件,文件名称自定义,文件类型以.conf结尾,文件内容如下

<VirtualHost *:9999> # 监听9999端口
    DocumentRoot "/root/build/x-frontend-manage/dist" # 编译文件的存放路径,下同
    ServerName www.abc.com   #域名,此域名映射的是 前端项目,如151.25.86.1::9999,不是后端接口的域名,没有域名的些localhost就好了,
    alias / /root/build/x-frontend-manage/dist/
    <Directory "/root/build/x-frontend-manage/dist">
        Allow from all
        AllowOverride all
        Require all granted
        Options FollowSymLinks Indexes
        Header set Access-Control-Allow-Origin *
    </Directory>
</VirtualHost>

改好之后重启Apache,Apache常用的命令。
service httpd status (查看状态)
service httpd restart (重启)
service httpd stop (停止)。

启动之后访问项目有可能会出现403报错,根据提示适时执行以下命令,再重启,基本就好了
chmod 755 /root/build
chmod +x -R /root

你可能感兴趣的:(前端,nginx,vue.js,前端,nginx部署vue项目,Apache部署vue项目)