Nginx部署Vue应用

本章只说怎么Nginx的安装以及Vue项目打包部署到Nginx服务器上。

在Linux上安装Nginx并配置环境

1. 依赖安装 （编译解压Nginx源码的各种依赖）

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

2. 下载并解压安装包

//创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx
//下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.g

3. 安装nginx

//进入nginx目录
cd /usr/local/nginx
//执行命令
./configure
//执行make命令
make
//执行make install命令
make install

4. 配置nginx.conf

# 打开配置文件
vi /usr/local/nginx/conf/nginx.conf

        location / {
            root   /opt/webapp/dist;  （这里是你Vue打包后的项目在linux服务器上的绝对地址）
            try_files $uri $uri/ /index.html last;    #history模式
            index  index.html index.htm;    #默认html
        }

5. nginx 命令
   进入/usr/local/nginx/sbin目录，输入./nginx即可启动nginx
   启动命令：./nginx
   停止命令: ./nginx -s quit 或者 ./nginx -s stop 前者比较优雅
   重启命令: ./nginx -s reload
   查看nginx进程: ps aux|grep nginx
   加入开机启动: vim /etc/rc.local 在底部加入 /usr/local/nginx/sbin/nginx 保存即可。

我们把Vue项目打包后生成的dist文件夹扔到服务器上，并配置好Nginx配置后，启动我们的Niginx，然后访问服务器地址。（我这里配置的监听端口为8000，因为Aliyun 默认有端口策略）

访问我的地址:http://47.107.82.xx:8000
如果我们没有配置我们自己的项目路径，默认看到的应该是Nginx的欢迎界面。

我已经上传了我的Vue项目，所以看到的是这个。

关于Nginx的各种配置，欢迎看我的相关博客。