基于Nginx部署Vue项目_vlambda技术博客

vlambda
2021-09-23

基于Nginx部署Vue项目

在linux中的Docker部署服务是一件异常麻烦的事

首先需要打包Vue项目

使用npm build打包，打包结束后将dist文件使用FIlezila软件上传至服务器

基于Nginx部署Vue项目

其次使用Docker拉取nginx镜像并运行Nginx

使用如下命令

docker pull nginx

拉取镜像

使用如下命令

docker run -d --name nginx-server --rm -p 80:80 nginx:1.18

挂载配置文件并启动Docker容器

启动结束后

使用 docker exec -it nginx bash进入容器

进入/etc/nginx修改nginx.conf文件如下

日志默认存储在以下路径

/var/log/nginx

主要有两种文件

error.log 错误记录

access.log 访问记录

打开配置文件做如下配置

其中upstream负责反向代理转发至其他服务器

附录：

vue.config.js配置

以下为其基本内容

module.exports = { devServer: { proxy: { '/api': { target: 'http://127.0.0.1:9001', changeOrigin: true, // secure: false, pathRewrite: { '^/api': '' } }, '/music': {        target: 'http://0.0.0.0:3000', changeOrigin: true, // secure: false, pathRewrite: { '^/music': '' } } }, before: app => {} }, chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { // 默认是main.js要清空换成自己的      config.entry('app').clear().add('./src/main.js')
 config.set('externals', { // vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress' // 'mavon-editor': 'mavon-editor' // 配置有问题，不知道如何修改 })
 config.plugin('html').tap(args => { args[0].isProd = true        args[0].title = 'test' return args }) })
 // 开发模式 config.when(process.env.NODE_ENV === 'development', config => { // 默认是main.js要清空换成自己的      config.entry('app').clear().add('./src/main.js') config.plugin('html').tap(args => { args[0].isProd = false        args[0].title = 'test' return args }) }) }}