CentOS安装nginx，部署vue项目

1、安装nginx依赖包
yum install gcc-c++ -y
yum install pcre pcre-devel -y
yum install zlib zlib-devel -y
yum install openssl openssl-devel -y

2、下载安装包和解压
# 安装之前，最好检查一下是否已经安装有nginx
find -name nginx
# 如果系统已经安装了nginx，那么就先卸载
yum remove nginx
# 首先进入/usr/local目录
cd /usr/local
# 从官网下载最新版的nginx
wget http://nginx.org/download/nginx-1.17.7.tar.gz
# 解压nginx压缩包
tar -zxvf nginx-1.17.7.tar.gz

3、开始安装
# 进入nginx目录
cd nginx-1.17.7
./configure --user=nobody --group=nobody --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_gzip_static_module --with-http_realip_module --with-http_sub_module --with-http_ssl_module
make
make install
whereis nginx

4、启动
/usr/local/nginx/sbin/nginx
5、查看nginx运行进程状态
netstat -anptu | grep nginx
6、常用命令
cd /usr/local/nginx/sbin/
# 启动
./nginx
# 停止相当于先查出nginx进程id再使用kill命令强制杀掉进程
./nginx -s stop
# 停止相当于是待nginx进程处理任务完毕进行停止
./nginx -s quit
# 重启
./nginx -s reload
# 强制关闭
pkill nginx
# 查看nginx进程
ps aux|grep nginx

7、测试
默认80端口

8、打包vue文件
在自己的电脑（windows）上打包vue项目

# 进入项目目录
cd D:\myvue\myblog
# 打包命令
npm run build
这个时候，目录下就会生成dist文件

####

vue项目npm run build报错npm ERR! missing script: build（已解决）

找了很多解决方法都不行，最后打开自己的package.json文件发现：build后面多了个：prod

最后执行命令：npm run build:prod

#####

9、打包文件上传CentOS服务器
使用xftp上传文件

10、配置 nginx.conf
打开：/usr/local/nginx/conf/nginx.conf 文件中间添加配置，完成后执行第六步常用命令：/usr/local/nginx/sbin/nginx –s reload

 
#user  nobody;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    server {
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   html;
            index  index.html index.htm;
        }
 
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
    }
    # *********************其余不动，添加以下配置  开始***********************
    server {
        listen       8001;
        server_name  localhost;
 
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
 
        location / {           
            root   /home/myblog/web/dist;  #vue前端项目打包后放在这里             
            index  index.html index.htm;   #这个index.html  是上面dist目录下的index.html 
            try_files $uri $uri/ /index.html; # 解决刷新出现404                 
        }
 
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
    }
    # *********************结束*********************
 
 
}

}
####

这次部署vue+Nginx的教训

1，打包的问题，我不懂打包的原理，把vue的代理去掉了，这是大问题，

2，Nginx的原理问题，我不懂Nginx代理的问题，导致配置搞了很久，这些搞了很久，

收获

但是这些坑都是踩过了，我对打包和Nginx的原理有了更深刻的认识，

另外就是我对跨域的问题也有了更新的认识，这很好，可以后端flask解决，也可以前端解决，很好，enjoy！

####