这段时间研究了一下vmess，还是看得一头雾水，不过好在有个还算清爽的机场面板v2board可以拿来借鉴下，就干脆用vue3+naive ui尝试重构了一下。目前进度大概有40%吧，用户端的构建算是基本完成了，管理员端的界面还有一部分设计没开始，等以后有空了再继续写。正好年初又学习了docker但是一直没练手，就先把docker部署的这部分记录一下，还算运气比较好吧，没踩什么坑。

Docker部署

置顶一个内容，来源是stackoverflow，谢谢这个老哥：

这应该是唯一踩的坑，这里我偷懒并不想将image push到docker hub，因为完成度还不算高，所以简单地在本地用docker build进行了构建，但在docker save的时候遇到了一点问题，由于我本地是windows的环境，使用了docker desktop来进行docker构建，但是一顿操作之后将这个tar包上传到debian服务器上就出现了错误，还得是stackoverflow，按照如下方式解决了该问题。

docker save [image] > file.tar followed by docker load < file.tar

will not work if the save and load are executed on a different OS. Always use:

docker save [image] -o file.tar followed by docker load -i file.tar

to prevent these issues. Comparing the TAR files produced by the different methods, you will find that they have a completely different size (303MB against 614MB for me).

创建Dockerfile

为了在Docker中部署Vue应用，首先需要创建一个Dockerfile：

# Step 1: 构建阶段
FROM node:14 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Step 2: 运行阶段
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

这个Dockerfile包含两个阶段：

  • 构建阶段：使用Node.js镜像构建Vue应用。
  • 运行阶段：使用Nginx镜像作为Web服务器托管构建产物。

构建和运行Docker镜像

  1. 构建镜像：
   docker build -t vue-app:latest .
  1. 运行容器：
   docker run -d -p 8080:80 --name vue-app-instance vue-app:latest

Nginx配置

为了支持Vue的HTML5 History模式，需要适当配置Nginx。不过我偷懒没在构建阶段修改配置，所以直接进入容器内部加了这个配置。

Nginx配置示例

在Nginx配置文件（通常位于/etc/nginx/conf.d/default.conf）中，添加如下配置以支持History模式：

location / {
  try_files $uri $uri/ /index.html;
}

这条规则确保所有的路径请求都回退到index.html，由Vue路由处理。

编辑容器内的Nginx配置

  1. 进入容器：
   docker exec -it vue-app-instance sh
  1. 使用文本编辑器修改配置，例如使用vi：
   vi /etc/nginx/conf.d/default.conf
  1. 重载Nginx配置：
   nginx -s reload

HTTPS支持

。。。