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

一：通过nginx部署

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

步骤一：编写nginx配置文件

找到nginx的安装目录，注意不是nginx软件包的存放目录，如下图所示

到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