VueCLI3 + Nodejs前后端分离项目部署至Nginx服务器

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/目录内容放到一个指定的地方,如下图:
VueCLI3 + Nodejs前后端分离项目部署至Nginx服务器_第1张图片
VueCLI3 + Nodejs前后端分离项目部署至Nginx服务器_第2张图片
打开Nginx配置文件(Nginx的安装目录下的conf/目录)
打开Nginx配置文件
添加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;
如下:
VueCLI3 + Nodejs前后端分离项目部署至Nginx服务器_第3张图片

最后,也欢迎各位看官来访问我部署的项目(http://tyong-top.design:4001),非常感谢!如果您还有什么疑惑,请留言告知,我会尽最大努力为您解决!

你可能感兴趣的:(运维,nginx,centos,服务器,linux)