曾经有人给我讲，所谓个人技术是死磕出来的，只有经过不断的试错和解决过程所有问题，以及不断变换思路去解决一件问题的过程，就是个人技术的成长。
最近在给自己搭建的小服务加一个bolg模块，在网上大概看了下轻量级的框架，最后使用vueQuill富文本编辑器 ，期间产生诸多问题，经过3天时间，基本解决，仅以此记录解决过程，给需要的人提供思路。
网站地址：TestManagePlatform
旧版的部署方式：
整个前端服务放到服务器,容器镜像打包，npm run serve 方式启动
niginx 配置
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server{
listen 443 ssl;
server_name 前端服务.top;
ssl_certificate /etc/nginx/conf/8673314_datafactory.metaversed.top.pem;
ssl_certificate_key /etc/nginx/conf/8673314_datafactory.metaversed.top.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
server_tokens off;
fastcgi_param HTTPS on;
fastcgi_param HTTP_SCHEME https;
access_log /var/log/nginx/access.logs;
if ($host ~ "\d+\.\d+\.\d+\.\d") {
return 404;
}
location / {
proxy_pass http://你的服务器本地地址:8000/;
proxy_redirect default;
proxy_http_version 1.1;
}
}
server{
listen 80;
listen 443 ssl;
server_name 后端服务.top;
ssl_certificate /etc/nginx/conf/9374020_good.metaversed.top.pem;
ssl_certificate_key /etc/nginx/conf/9374020_good.metaversed.top.key;
server_tokens off;
fastcgi_param HTTPS on;
fastcgi_param HTTP_SCHEME https;
access_log /var/log/nginx/access.logs;
if ($host ~ "\d+\.\d+\.\d+\.\d") {
return 404;
}
location / {
proxy_pass http://你的服务器本地地址:8088/;
proxy_redirect default;
proxy_http_version 1.1;
}
}这个方式有很多问题：
1、整体包内容比较大，加载时间长。
2、服务器环境npm install 时依赖包安装版本可能存在不一致情况，出现问题不好分析。
3、一些资源文件加载路径问题会导致服务启动不起来。
本次出现问题在于，本地调试完成后,由于引入
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'服务器提示：找不到'@vueup/vue-quill' 和'@vueup/vue-quill/dist/vue-quill.snow.css'
由于是docker 先打镜像包，在启动docker-compose 文件,一开始怀疑是文件路径不识别。
折腾许久后，发现是镜像包没有把相关新增依赖加上。于是开始调试DockerFile
FROM node
WORKDIR /root
COPY ./ .
RUN npm install
最后发现npm install 依赖时候除了很多错。大概率都是依赖安装失败。
于是决定永久避开这个坑，采用静态文件方式部署前端
静态文件方式部署前端
1、前端vue.config.js 配置
module.exports = {
lintOnSave:false,
// 这里一定一定记得配置为‘/’而非“./”
publicPath:"/",
devServer: {
port:8000,
proxy: { //配置跨域
'/api':{
target: 'http://127.0.0.1:8088/',
//这里后台的地址模拟的;应该填写你们真实的后台接口
changeOrigin: true, //允许跨域
// ws: true, // proxy websockets
pathRewrite: {
'^/api': ''
},
host: '0.0.0.0',
}
}
}
}2、打静态包dist
npm run build执行完成后项目多一个dist 包
4、将整个包文件放入niginx 配置的index 入口目录下去，并更新niginx.config 文件
新的配置方式：
server {
listen 80;
listen 443 ssl;
server_name 前端域名.top; #域名
ssl_certificate /etc/nginx/conf/8673725_www.metaversed.top.pem;
ssl_certificate_key /etc/nginx/conf/8673725_www.metaversed.top.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
fastcgi_param HTTPS on;
fastcgi_param HTTP_SCHEME https;
access_log /var/log/nginx/access.logs;
location / {
root /html;
index index.html index.htm; #默认访问的首页内容
try_files $uri $uri/ @router;
}
location @router {
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
rewrite ^.*$ /index.html last;
}
location /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;
proxy_pass http://服务器本地地址:8088/;
}
}root /html; 这个文件下存放dist的内容，或者挂在到服务器 dist 具体的路径上。实时更新dist文件即可实现热部署。
其中 location / 配置前端入口，这里直接使用了服务器首页配置
try_files $uri $uri/ @router; 这个一定要配置，静态资源跳转全靠它
其中location /api/ 配置后端代理
proxy_pass http://服务器本地地址:8088/; #对应到你的后端服务地址
到此整个服务算是换了一个新的方式部署。文章来源：https://www.toymoban.com/news/detail-654004.html
总结：
至于docker 容器化部署是出现的依赖包文件不存在问题，目前可以确认的是以为打包镜像失败导致。至于具体原因还没有找到。前端本就依赖过多，如果本地和线上无法保证依赖包一致或者复用的话，不如直接使用本地打出来的dist 包进行静态资源不熟。好处多多。文章来源地址https://www.toymoban.com/news/detail-654004.html
到了这里，关于关于vue3+niginx前端部署问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
