前两篇文章中，我分别介绍了框架的搭建利用vue-cli + vant搭建一个移动端开发模板，并且把项目中axios请求和vuex的用法做了简要的介绍如何在项目里管理好axios请求与vuex。在这两篇文章的评论中，有些朋友希望把项目放在线上，可以供大家预览一下。既然需求来了，哪有拒绝的道理。正好我之前也没弄过部署项目到服务器上，那就乘这次机会把项目部署在服务器上，巩固一下自己学的知识。
页面上是我乱加的东西，后续会慢慢完善（可能是模仿某个成熟的项目，也有可能是封装组件）。
2. 安装命令yum install nginx，出现确认时按y
3. 安装完成后，输入 service nginx start 启动nginx
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 {
}
}
wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
yum install yarn
.nuxt
nuxt.config.js
package.json
static // 如果有用到静态资源
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;
}
}
nginx -s reload
cd ~
cd /www/ssr/blog
yarn install -production
yarn start
在执行yarn install和yarn start两个命令时可能会报错，可能是node版本太低了，可以用nvm切换node版本。
打开IP:8081就可以访问我们的项目了（记得要在阿里云服务器上把8081端口放开）
安装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
通过记录这两个项目如何发布到服务器上，我大致了解了nginx的相关知识。如果项目中有不对或者不妥的地方，或者跟着项目走遇到报错的地方，欢迎在评论区提出。
手把手教你把web应用丢到服务器上（单页应用+ 服务端渲染）
原文：https://www.cnblogs.com/momozjm/p/13207757.html