Nginx + Vue项目部署

在windows服务器上部署Vue项目

第一步： 安装Nginx

• 下载 Nginx Windows 包 官网
• 在服务器C:\Program Files\nginx（举例，实际目录自定）解压包
• 解压目录下找到nginx.exe并双击
• 在浏览器（服务器或你的个人电脑上的）输入localhost / [服务器ip]访问nginx服务，如果显示“welcome nginx”则Nginx环境服务成功

个人电脑访问前，请确认服务器80端口是否开通外网SLB

第二步： 拷贝前台代码到服务器

• 开发生成静态部署文件：npm run build
• 复制项目目录dist文件下的内容，到服务器C:\www目录下

第三步： 配置Nginx静态文件访问服务

• 找到nginx解压目录下的conf/nginx.conf文件
• 如下修改配置：

    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   C:\www; #默认访问目录
                index  index.html; #默认访问文件
                try_files $uri $uri/ /index.html; #目录不存在则执行index.html
            }
  
            #error_page  404              /404.html;
            ... #后面的不需要修改
  

在Linux服务器上部署Vue项目

第一步： 安装Nginx

• 检查gcc g++开发类库是否装好：rpm -qa | grep gcc, 如果未返回libgcc && gcc && gcc-c++三个包的版本号则需先安装这三个包。（nginx依赖的包）

  鉴于我们用的阿里云环境默认都是有装的，故不写怎装这三个包。

• 下载 Nginx Linux 包 官网
• 上传包nginx-1.12.2.tar.gz到/home/nginx目录下(目录自定义)
• 解压nginx-1.12.2.tar.gz:

  cd /home/nginx 
  tar zxvf nginx-1.12.2.tar.gz
  

• 配置、编译、安装：

  cd nginx-1.12.2
  ./configure #配置
  make #编译
  make install #安装
  

• 启动并校验nginx安装情况

  cd /usr/local/nginx/sbin
  ./nginx #启动
  ps -ef | grep nginx #查看nginx进程，如果存在则安装成功
  

第二步： 拷贝前台代码到服务器

• 生成静态部署文件：npm run build
• 上传静态文件（build生成的文件，默认在dist目录下）到服务器路径/root/project/www

第三步： 配置Nginx静态文件访问服务

• 找到配置文件cd /usr/local/nginx/conf
• 如下修改配置：vim nginx.conf

    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   /root/project/www; #默认访问目录
                index  index.html; #默认访问文件
                try_files $uri $uri/ /index.html; #目录不存在则执行index.html
            }
  
            #error_page  404              /404.html;
            ... #后面的不需要修改
  

nginx常用命令

nginx -s stop #强制关闭
nginx -s reload #重启