准备工作
docker和安装docker-compose安装教程网上大把,这里不细说了
docker-cmpose部署umi项目
按照官网新建umi项目
将打包后的文件dist上传到服务器,并新建docker-compose.yml文件
创建docker-compose.yml
::: code-group
# docker-compose.yml
version: '3.1'
services:
db:
image: postgres
volumes:
- ../postgres:/var/lib/postgresql/data
restart: always
ports:
- 5432:5432
networks: # 容器网络
- laoyang-net
environment:
- POSTGRES_USER=root
- POSTGRES_PASSWORD=******
adminer:
image: adminer
restart: always
ports:
- 8008:8080
ly_server:
build: # 制作镜像
context: . # 当前目录，Dockerfile 所在的目录（单“.”表示当前目录）
dockerfile: Dockerfile # dockerfile文件名称
container_name: nestjs
restart: on-failure:3
ports:
- 3000:3000
networks: # 容器网络
- laoyang-net
environment:
- DATABASE_URL="mysql://账户:密码@101.43.20.171:3306/dev"
depends_on: # 依赖项
- db # 容器名
nginx:
image: nginx:latest
container_name: nginx
restart: always
ports:
- 8080:80
volumes:
- ../nginx.conf:/etc/nginx/nginx.conf # 配置ngix.conf 转发处理后端(nest.js)请求
- ../ly-admin/dist:/usr/share/nginx/html
depends_on: # 依赖项
- ly_server # 容器名
networks: # 容器网络
- laoyang-net
networks:
laoyang-net:
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name 101.43.20.171;
charset utf-8;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ $uri.html /index.html =404;
allow all;
}
location /api/ {
proxy_pass http://101.43.20.171:3000/;
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
allow all;
proxy_set_header Origin "";
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
其中 db为数据库服务 adminer为数据库管理工具 ly_server为后端服务 nginx 为静态资源服务器 前端dist文件压缩后放在ly-admin文件夹下然后解压 :::
目录结构
.
├─ ly-admin # 前端目录
│ ├─ dist
├─ ly-server # 后端目录
│ └─ src
│ ├─ prisma
│ └─ package.json
│ ├─ docker-compose.yml
│ └─ Dockerfile
│ └─ ...
└─ nginx.conf
部署步骤
上传dist压缩包到ly-admin目录, 进入ly-admin目录
cd ly-admin
解压dist
unzip -d dist dist.zip
进入到docker-compose.yml所在目录 即ly-server目录
cd ../ly-server
启动服务
docker-compose up -d
前端部署完成 查看容器启动情况 都为runing 则正常启动
docker ps
docker-cmpose部署nest项目
docker-compose.yml放在后端项目的根目录下
尝试过打包部署 prima 初始化总有问题 暂时没找到原因，后修改为上传整个项目到服务器部署
部署步骤
git下载最新代码压缩包 解压压缩包后修改文件夹名为ly-server后压缩（仅仅便于服务器上解压） 上传到 ly-server文件夹所在目录下
删除旧文件代码
rm -rf ly-server
解压压缩包
unzip -d ly-server ly-server.zip
进入ly-server目录
cd ly-server
启动服务
docker-compose up -d
此时以Dockerfile构建镜像
# 使用 Node.js 镜像作为基础镜像
FROM node
# 设置工作目录
WORKDIR /code-blog
#安装pnpm
RUN npm install -g pnpm
#复制依赖文件到容器工作目录
COPY package*.json .
#复制prisma到容器工作目录
COPY prisma ./prisma/
#复制prisma的环境变量文件到容器工作目录（未解决prisma读取环境变量失败的问题）
# COPY .env ./prisma/.env
# 安装项目依赖
RUN pnpm install
# 将docker-compose.yml所在目录的所有文件复制到容器工作目录
COPY . .
# RUN npm install -g prisma
# 执行prisma 初始化脚
# RUN npm run build
# 暴露 Node.js 服务端口
EXPOSE 3000
# 运行 Node.js 服务
CMD ["npm", "start"]
后端项目部署完成 查看容器启动情况 都为runing 则正常启动
docker ps
docker-cmpose部署vitepress
vitepress部署参考umi部署
如果部署后发现服务器样式错乱 请检查nginx.conf 和项目配置文件中的base 路径是否正确
部署步骤
由于本人vitepress 单独部署到了另一个nginx容器上，且还涉及到权限问题，可能导致无法上传压缩包到指定目录
可先上传到未涉及到权限的目录，如/laoyang/code-blog
cd /laoyang/code-blog
使用sudo命令复制压缩包到涉及到权限指定目录
sudo cp dist.zip /usr/local/nginx
进入到vitepress部署目录
cd /usr/local/nginx
删除旧的vitepress代码
sudo rm -rf dist
解压压缩包到指定目录
sudo unzip -d www dist.zip
重启nginx服务
docker restart nginx-test
