Vue CLI3 + NodeJS 前后端分离项目部署至Nginx服务器的流程
今天花费了很长一段时间来做这件事,踩了不少坑,网上也很少有这方面的案例,这里我就把我今天的部署流程进行详细的展列,步骤如下:
第一步
解决掉请求域问题,前后端分离,首要想到的是请求域的解决,Vue CIL3
的配置文件都隐藏了,这里我们需要在项目的根路径下创建vue.config.js
文件,整个文件内容如下:
module.exports = {
configureWebpack: {
resolve: {
alias: { /**配置别名,@在内部已经使用了别名,对应src/文件夹*/
assets: '@/assets',
common: '@/common',
components: '@/components',
network: '@/network',
views: '@/views'
}
}
},
/**上面的都是Vue前台使用别名的配置,不用管***********/
/*********从这里开始是重点!!!!!!!!!!!**********/
devServer: {
/**处理前后端分离跨域问题*/
proxy: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {// 代理的虚拟目录
target: 'http://127.0.0.1:3001',//请求后台Node项目的url
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': ''//由于上面的虚拟目录实际上是不存在的,不去掉的话访问的时候显示的url会变成'http://localhost:3000/api',所以得去掉
}
}
}
}
}
同时axios
(这里我使用的是axios发送网络请求的)要使用上面的配置,通过:
axios.create({ //创建axios实例
baseURL: '/api',
// timeout: 40000, // 最多超时多久
// ... axios具体配置由自己来决定,但是一定要让发送请求的axios实例与上面的 《代理虚拟目录》产生关系(即要使用到它)
})
前台路由(router)的配置,其实这一步是多余的,根本不用看这一步,当然你也可以来看看:
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL, // 本地测试使用该路由配置
// base: '/sale_puma/', // 网上好多教程都是让改成这个,但是我试了,这个和上面的都可以,没有任何影响
routes
})
export default router
将Vue项目进行打包,得到打包生成的dist/目录
;
Vue前台的配置到此就结束了
后台的Node项目压根就没有配置过
第二步
将项目发送至服务器,我是用WinSCP工具将Vue前台项目和Node后台项目发送至服务器,我们先把node项目跑起来,使用pm2
将node项目在后台以守护进程的形式启动,pm2
特别好安装,随便搜一下就出来了,先安装好pm2
,再进入Node项目的根路径下使用命令pm2 start app.js命令启动Node项目,我的Node项目使用是express框架,
第三步
开始重头戏,配置Nginx,首先保证有Nginx环境,安装还请各位自行百度(这个博客主要是讲项目部署的),我们将第一步打包的Vue项目的dist/目录
的内容放到一个指定的地方,如下图:
打开Nginx配置文件(Nginx的安装目录下的conf/目录
)
添加server标签
,如下:
server {
listen 4001; # 监听的端口,就客户端访问的端口
location / {
root /usr/local/nginx/my_html/sale_puma; # 对应Vue打包项目的目录路径
index index.html index.htm; # 默认响应页面
try_files $uri $uri/ @router; # 引用定义的@router路由(保证Vue的前台路由再Nginx下不失效)
}
location @router { # 这个标签就是来保证Vue前台路由不失效的
rewrite ^.*$ /index.html last; # 我也不太清楚,照着写吧,官方文档下的
}
location /api/ { // 这个要和第一步的跨域请求配置的proxy标签有关,但是注意第一步是 /api , 这里是 /api/
// 下面这些都照着写
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
// 下面对应的是Node项目的请求地址(就是第二步的接口地址)
proxy_pass http://150.158.212.186:3001/;
}
}
Nginx是开的(重启Nginx),再nginx安装目录下的 sbin/目录
使用命令 ./nginx reload
,使上面配置的Nginx文件生效;
**至此,配置全部完成,**此时我们访问该端口测试:http://tyong-top.design:4001;
如下:
最后,也欢迎各位看官来访问我部署的项目(http://tyong-top.design:4001),非常感谢!如果您还有什么疑惑,请留言告知,我会尽最大努力为您解决!