Nginx部署Vue项目

1、安装Nginx

• 我使用的是yum安装。（当然也可以自己下载手动安装）。输入命令查看yum上的nginx可用安装包

  yum list | grep nginx
  

• 安装nginx。yum -y install nginx
  
  直到出现Complete！

• 启动nginx systemctl start nginx

• 查看nginx状态systemctl status nginx
  
  正在运行。安装完成。

2、build Vue项目

• 生成dist文件
  右键Vue项目→外部命令→npm run build→生成dist文件
• 上传dist文件
  使用rz工具或者Xftp工具，将dist文件上传到Linux系统。文件位置根据自己需要。也可以自定义文件名。(例如 /home/project/test)

3、部署Vue项目

• 首先，找到nginx的配置文件nginx.conf
  在启动nginx查看其状态时
  
  我们可以看到配置文件的路径。
  当然我们也可以全局搜索find / -name nginx.conf
  
• 进入配置文件所在位置后打开配置文件 nginx.conf。为了简单操作，我直接使用xftp来操作了
  主要对server进行配置

  server {
          listen       8806; 							#监听端口设置，也就是你vue项目的端口
          server_name  localhost;						
  
          # Load configuration files for the default server block.
          include /etc/nginx/default.d/*.conf;
          
          location / {
  			root		/home/project/test;			#前端dist文件夹存放路径
     			try_files $uri $uri/ /index.html;		#解决页面刷新报404错误
          }
  
  
          location /prod-api/{						#匹配/prod-api/
  			proxy_pass http://你的IP:你的端口/;		#跳转至后端的接口
          }
  
          error_page 404 /404.html;
              location = /40x.html {
          }
  
          error_page 500 502 503 504 /50x.html;
              location = /50x.html {
          }
      }
  

  配置完成！启动nginx就可以访问了。

4、Linux系统安全策略配置

OK！小编以为已经搞定了！访问的时候，却报错了！
后来网上查阅资料，终于解决。解决方法如下：

• 找到文件/etc/selinux/config
  

• 打开文件config
  
  其中enforcing，permissive，disabled是Linux系统安全策略的三种模式。安全程度enforcing>permissive>disabled。小编没有做深入研究。。。

• 修改配置文件

  只要把SELINUX=enforcing改为SELINUX=permissive即可。（当然改成disabled更可以）

• 重启系统。启动nginx。

  发现此时项目可以正常访问了！