手把手教你把web应用丢到服务器上（单页应用+ 服务端渲染）

前两篇文章中，我分别介绍了框架的搭建利用vue-cli + vant搭建一个移动端开发模板，并且把项目中axios请求和vuex的用法做了简要的介绍如何在项目里管理好axios请求与vuex。在这两篇文章的评论中，有些朋友希望把项目放在线上，可以供大家预览一下。既然需求来了，哪有拒绝的道理。正好我之前也没弄过部署项目到服务器上，那就乘这次机会把项目部署在服务器上，巩固一下自己学的知识。

页面上是我乱加的东西，后续会慢慢完善（可能是模仿某个成熟的项目，也有可能是封装组件）。

文章概括

1. 部署一个vue-cli脚手架生成的项目，丢到服务器上。预览地址
2. 部署一个nuxt.js生成的项目，丢到服务器上。预览地址

一、准备工作

1. 你需要到阿里云（或者其他云服务器）买个你自己的服务器耍耍。我买的是云服务器ECS，操作系统是CentOS。
2. 购买完成后，你需要一个工具可视化访问你的服务器，我用的是MobaXterm

二、安装nginx

1. 用MobaXterm连接上服务器后，界面是这样的（www目录是我后来建的，用来放前端项目）

2. 安装命令yum install nginx，出现确认时按y

3. 安装完成后，输入 service nginx start 启动nginx

三、部署web项目(vue-cli)

1. nginx默认安装在/etc/目录下，我们用cd命令

cd /etc/nginx

进入到nginx根目录下，在这里有一个nginx.conf配置文件，想要部署项目，需要修改这里相关的配置，我们用vim nginx.conf进入按i键，下边会显示insert字样，代表此时可以进行编辑，修改server对象（后面的注释是为了解释代码的意思，项目使用时需要把注释去掉，不然会报错）

server {
        listen       8080       default_server; // 开放访问的端口号
        server_name  47.114.140.199;            // 服务器IP
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
          root /www/spa/dist;   // 项目所在的位置，我是在根目录新建了www文件夹
          index index.html;     // 此html页面作为IP访问项目的入口
          try_files $uri $uri/ /index.html; // 对于部署Vue、React等单页应用项目，为防止页面刷新时出现404，需要设置
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

1. 配置完毕后按Esc退出编辑，然后按:wq退出并保存，如果提示无法写入，无权限，或者改文件只读，请输入:set noreadonly，然后再次:wq，成功会返回命令界面
2. 接着我们重启nginx服务器，nginx -s reload，如果提示失败，请输入nginx -c /etc/nginx/nginx.conf，然后再次重启，到此为止，我们的项目就部署好了。
3. 前端项目执行build指令后，将dist文件夹放到 /www/spa 路径下。
4. 浏览器输入IP:端口号访问项目，会出现无法访问的情况，这是因为没有添加安全组规则（服务器没放开此端口的访问权限），这个时候我们需要有添加安全组规则，以我项目为例，我快速添加了多个安全组规则。添加完8080端口后，我们就可以在8080端口访问我们的项目了。
   
   

四、部署服务的渲染项目（nuxt.js举例，next.js同理）

1. 安装nodejs环境(具体步骤请点击此链接)[https://help.aliyun.com/document_detail/50775.html]。
2. 安装yarn(执行以下两步)

wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo

yum install yarn

1. 直接用nuxt.js官网的例子，执行build指令后，我们把以下文件（文件夹）放到 /www/ssr/blog 路径下

.nuxt
nuxt.config.js
package.json
static  // 如果有用到静态资源

1. 再次进入到nginx根目录下，修改nginx.conf，添加一个新的server对象

server {
    listen       8081;
    server_name  47.114.140.199;
    root /www/ssr/blog;
    location / {
        proxy_pass http://127.0.0.1:3000; // 反向代理
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
}

1. 接着我们重启nginx服务器

nginx -s reload

1. 依次以下执行，进入到nuxt项目的路径下，install依赖并启动应用

cd ~
cd /www/ssr/blog
yarn install -production
yarn start

在执行yarn install和yarn start两个命令时可能会报错，可能是node版本太低了，可以用nvm切换node版本。

1. 打开IP:8081就可以访问我们的项目了（记得要在阿里云服务器上把8081端口放开）

2. 安装pm2进程守护

npm install pm2 -g

这里要记住你的安装地址，我的是/root/node-v6.9.5-linux-x64/bin/pm2



安装完成后你执行命令

pm2 list

如果报如下错误

pm2: command not found

你需要配制到全局，即创建一个linux下的软连接。找到全局环境PATH路径，输入命令：

echo $PATH

回车后有以下几个值

/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin

你可以选择任何一个以：隔开的路径做为系统环境路径，我通常会选/usr/local/bin。执行以下指令创建软连接

ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/bin/

如果报错了，你可以换一个



比如换成/usr/local/sbin/

ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/sbin/

注意：/root/node-v6.9.5-linux-x64/bin/pm2是我上面安装pm2的地址，你需要看你自己的安装地址是什么。

这时候以下任一一个指令执行（我用的是上面这个，下面的会导致errored，还不知道原因）：

pm2 start npm --name "SSR-service" -- run start  #SSR-service的名称随便取，最好是你package.json里的name
pm2 start yarn --name "SSR-service" -- run start

整个nginx配置：

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       8080	default_server;
        server_name  47.114.140.199;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
      	  root /www/spa/dist;
      	  index index.html;
      	  try_files $uri $uri/ /index.html;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

    server {
        listen       8081;
	      server_name  47.114.140.199;
        root /www/ssr/blog;
        location / {
            proxy_pass http://127.0.0.1:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $remote_addr;
        }
    }

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers PROFILE=SYSTEM;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

五、可能出现的错误

我在用pm2启动项目时，会显示状态是online，但是再执行pm2 ls后，状态又变成了errored。经过排查我发现，造成错误的指令是以下两中，一个使install时没加 -production

yarn install -production

还有一个是pm2启动项目时用的是yarn，而不是npm

pm2 start npm --name "SSR-service" -- run start

六、常用pm2指令

1. pm2 delete all # 关闭并删除所有应用
2. pm2 list # 列表 PM2 启动的所有的应用程序
3. pm2 stop all # 停止所有的应用程序
4. pm2 start app.js --name="api" # 启动应用程序并命名为 "api"

七、参考文章

• 原来安装Nginx并部署vue前端项目是这么简单
• 部署Node.js环境（CentOS 7）
• NuxtJS 项目部署如何部署到nginx
• PM2 常用命令

八、总结

通过记录这两个项目如何发布到服务器上，我大致了解了nginx的相关知识。如果项目中有不对或者不妥的地方，或者跟着项目走遇到报错的地方，欢迎在评论区提出。