这段时间研究了一下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镜像
- 构建镜像:
docker build -t vue-app:latest .
- 运行容器:
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配置
- 进入容器:
docker exec -it vue-app-instance sh
- 使用文本编辑器修改配置,例如使用
vi
:
vi /etc/nginx/conf.d/default.conf
- 重载Nginx配置:
nginx -s reload
HTTPS支持
。。。