Vue+Node 全栈项目部署流程

作者: 夏海峰 | 来源:发表于2021-03-27 02:02 被阅读0次

如何把做好的全栈项目部署到线上呢？今天我以一个全栈项目（Vue、Node、Express、MongoDB）为例，为大家演示js全栈项目的上线流程，仅供参考，希望你能喜欢。

一、项目简介与技术栈

1、WebApp（H5项目）

技术栈：vue、vue-router、vuex、vant、sass、rem。
主要功能：首页商品列表、下拉刷新、触底加载、分页；品类搜索（vuex实现缓存）；购物车、登录鉴权、注册；个人中心，地址簿管理等。
仓库地址：https://gitee.com/summer2020/vue-vant-webapp

2、管理系统（PC项目）

技术栈：vue、vue-router、vuex、element-ui、sass、socket.io-client
主要功能：登录鉴权、权限管理；商品的增删改查、图片上传；Socket通信服务等。
仓库地址：https://gitee.com/summer2020/vue-element-admin

3、Node RESTful API

技术栈：node.js、express、ejs、mongoose
主要功能：登录、注册、token鉴权、权限管理、商品管理、购物车（订单）管理、地址簿管理等。
仓库地址：https://gitee.com/summer2020/node-fullapi

WebApp（H5项目）

管理系统（PC项目）

二、上线前准备

1、域名购买、备案、DNS解析

在阿里云注册账号，购买.com域名一个。在阿里云控制台中，点击“备案”，进入备案专区，提交备案资料（协议复印件照片、身份证复印件照片、备案幕布拍照照片等）。

域名备案

初次备案，需等待21个工作日出备案结果。备案成功后，可以拿到 ICP主体备案号，在网站开发时，将其添加到网站底部。

进一步，使用阿里云免费的 DNS 解析服务，完成域名到云服务器IP地址的解析（你得先买一台 ECS云服务器，见下方内容）。

域名解析

www 配置PC官网、Node数据库服务
m 配置 H5官网
oa 配置管理系统网站
cdn 配置图片服务

2、购买一台云服务器

不同规格的ECS云服务器，使用场景各不相同，价格也是千差万别。我主要用于教学，选择了较便宜的通用型。

购买ECS云服务器

有了云服务器，就有了公网IP和私网IP，上文中的域名解析服务，就要用到公网IP。我买的云服务器是 CentOS 7.4 64位。

使用 XShell 或者其它 SSH 工具即可远程连接云服务器，进一步安装你所需要的软件和应用程序。在 Git Bash 中，可以使用 ssh 命令进行连接。

ssh root@xxx.xx.xxx.xxx
# 输入密码，连接成功

三、基础软件安装

1、nginx 安装

yum info nginx
yum install nginx
# 默认安装在 /etc/nginx目录
# nginx.conf 是默认配置文件

nginx常用命令有：

# 检测修改后配置文件是否有语法错误
nginx -t
#启动 nginx 服务
nginx -c /etc/nginx/nginx.conf
# 停止 nginx 服务
nginx -s stop
# 重启 nginx 服务
nginx -s reload

2、git 安装

yum info git
yum install git

git 常用命令：

# 配置用户名和邮箱
git config --global user.name "geekxia"
git config --global user.email "448914712@qq.com"
git config --list

# 记住用户名和密码，方便使用
git config --global credential.helper store

# 克隆、更新远程代码
git clone
git pull

3、node 安装

yum info nodejs
yum install nodejs

# 验证 nodejs 安装成功与否、版本号查询
node -v
npm -v

如果 yum 安装的 nodejs 版本过低，我们还可以使用另一种方式来安装指定版本的nodejs。

# 下载nodejs v12
wget https://nodejs.org/dist/v12.14.1/node-v12.14.1-linux-x64.tar.xz

# 解压
tar xf node-v12.14.1-linux-x64.tar

# 重命名文件夹
mv node-v12.14.1-linux-x64 /usr/local/node12

# 配置环境变量
vim /etc/profile
# 在这个配置文件中添加一行环境变量
PATH=/usr/local/node12/bin:$PATH

# 让环境变量生效：
source /etc/profile

# 测试node安装是否成功
node -v
npm -v

4、mongodb安装

参考mongodb英文官网，根据文档指示安装Linux平台对应的社区版本。

# 安装 MongoDB 社区版（免费）
yum info mongodb-org
yum install mongodb-org

# 启动数据库
systemctl start mongod
systemctl status mongod

# 进入交互式命令行环境，说明安装成功
mongo
show dbs
# 创建数据库，数据库名为node
use node
db.createCollection("users")
# 向users集合中插入一条数据
db.users.insertOne({username:'admin',password:'******',role:'admin'})
db.users.find()

四、部署 node api 服务器

1、启动 node服务

使用 ftp工具，或者使用 git 把本地的 node代码推送到云服务器上。使用 nodemon 启动 node 服务。

# 使用 nodemon
# 在 node服务程序的根目录
npm install nodemon -g
nodemon app.js

另一个选择是，安装 pm2 ，更加优雅地管理 node 服务。

npm install pm2 -g
pm2 start app.js

2、部署node api服务

检测防火墙是否关闭，如果未关闭，可先关闭掉防火墙。

systemctl status firewalld.service
systemctl stop firewalld.service 
systemctl disable firewalld.service

3、在nginx中配置node api服务

server {
    listen 80;
    server_name www.3fengs.com;
    include /etc/nginx/default.d/*.conf;
    # node api接口
    location /api {
        proxy_pass http://localhost:8888;
    }
}

每次修改nginx配置文件，都要重启nginx。

nginx -t
nginx -s reload

4、在客户端测试node服务的连通性

# nginx服务的默认端口是80

# 使用域名测试接口的连通性
http://3fengs.com/api/v1/user/list
# 使用外网IP地址测试接口
http://xxx.xx.xxx.xxx/api/v1/user/list

五、部署管理系统/WebApp

1、Vue项目打包的注意事项

无论部署生产环境，还是部署测试环境，都要进行打包。
部署打包，本地development中的所有配置，比如devServer都不起作用，即不会影响线上环境。
/src中的文件模块会被webpack打包处理、压缩、添加Hash命名等，/public里的资源文件，不会被处理，后续可以方便地进行CDN加速。
Vue项目打包，以vue.config.js配置文件为准，常用配置可参考Vue CLI文档。
filenameHashing默认为true。当它是开启状态时，/src中所有打包的文件都会被加上hash值，这是为了解决浏览器的强缓存的缺陷。（当webpack打包时，被关联的文件如果没有发生变化，Hash是不变的。当被关联的文件修改了，再次打包时，它打包结果的hash会变化。）
在开发过程中，当我们使用图片时，应该把图片放在哪里呢？1、远程图片（可直接使用图片URL）；2、不需要考虑优化的图片（可以放在assets目录中,它会变成代码包的一部分）；3、可能要进行CDN优化的图片（建议放在public中）。Vue脚手架环境下开发，建议使用模块化语法统一管理项目中的所有图片。
baseURL用于指定 ajax的 baseURL，每次打包时都特别注意。它常常会导致跨域问题产生，需要使用nginx配合解决跨域问题。

# 打包前，配置好图片的线上访问地址
const imgBase = 'http://cdn.3fengs.com'
# 打包前，配置好ajax的 baseURL
const baseURL = 'http://oa.3fengs.com'
# 打包前，配置图片上传的action地址
const imgAction = 'http://oa.3fengs.com/api/v1/upload/img'
export default {
  imgBase,
  baseURL,
  imgAction
}

publicPath用于控制打包后的index.html文件用何种方式引入各种静态文件，其默认值是/。
pages用于实现多页面应用程序（MPA）,在默认情况下Vue脚手架做的是单页面应用程序（SPA）。
如果Vue-Router使用的history路由模式，当部署到线上时，会出现404的刷新问题，这需要在nginx中做重定向处理。

2、nginx.conf 配置示例

使用ftp工具，或者使用git把打包好的静态资源文件传输到云服务器上。

# 部署 node api 服务
server {
    listen 80;
    server_name www.3fengs.com;
    include /etc/nginx/default.d/*.conf;
    # node api接口
    location /api {
        proxy_pass http://localhost:8888;
    }
}
# 部署管理系统（PC项目）
server {
    listen 80;
    server_name oa.3fengs.com;
    location / {
        root /root/vue-stack/web-gp/oa;
        index index.html;
    }
    # 解决跨域问题
    location /api {
        proxy_pass http://3fengs.com;
    }
}
# 部署WebApp（H5项目）
server {
    listen 80;
    server_name m.3fengs.com;
    location / {
        root /root/vue-stack/web-gp/m;
        index index.html;
        # 解决Vue-Router的 history模式问题
        try_files $uri $uri/ /index.html;
    }
    # 解决跨域问题
    location /api {
        proxy_pass http://3fengs.com;
    }
}
# 部署图片服务
server {
    listen 80;
    server_name cdn.3fengs.com;
    # 项目中的图片存储位置
    location / {
        root /root/vue-stack/node-fullapi-gp/public;
    }
}

nginx -t
nignx -s reload

重启 nginx 即可正常访问上述两个项目。访问测试参考：

访问WebApp（H5项目）：http://m.3fengs.com
访问管理系统（PC项目）：http://oa.3fengs.com

本篇结束，感谢点赞与关注！！

网友评论

本文标题：Vue+Node 全栈项目部署流程

本文链接：https://www.haomeiwen.com/subject/hvrehltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！