环境: 阿里云ECS + Ubuntu24
自己写了一个把天气预报和地图结合起来的页面，方便出门的时候用 --->>> huangyn.icu/map/
前端Vue3，后端nestjs，静态资源、反向代理用nginx。
为方便部署，使用docker-compose，本地把文件组织好并压缩成zip，服务器上只需解压上传的zip，并执行 docker compose up --build一行命令即可。
下面简单罗列一下从服务器安装docker到部署项目的过程。
文件结构参考：
── app
│ ├── Dockerfile
│ ├── nestjs项目代码
── nginx
│ ├── Dockerfile
│ ├── nginx.conf 待映射的nestjs配置文件
│ ├── dist vue打包产物
├── docker-compose.yml
1、docker安装
# 更新apt
sudo apt-get update
# 切换apt源到国内
sudo apt-get -y install apt-transport-https ca-certificates curl software-properties-common
sudo curl -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository -y "deb [arch=$(dpkg --print-architecture)] https://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
# 安装docker，以及compose插件
sudo apt-get -y install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
2、docker 国内镜像设置
在国内，不配置合适的源，会面临下载不了镜像的问题，会超时。注意，阿里云的源不好用，自己找源来用：
修改文件 /etc/docker/daemon.json（如果不存会自动创建，源要带 https://），并重启服务。
完成这一步后，docker就可以正常启动我们的项目了。 注意，daemon.json的内容，直接复制的空格有问题，需要自行替换下。否则会导致docker启动失败
# 创建目录
sudo mkdir -p /etc/docker
# 写入配置文件
sudo tee /etc/docker/daemon.json <<-'EOF'
{
"registry-mirrors": [
"https://docker.unsee.tech",
"https://dockerhub.icu"
]
}
EOF
# 重启docker服务
sudo systemctl daemon-reload && sudo systemctl restart docker
3、nestjs安装与运行
nestjs 需要在服务器中进行安装，所以我们需要在nestjs所在这个镜像中执行一些命令，以便顺利执行。
下面的Dockerfile文件包含了一系列操作：使用node18的镜像作为基础，切换npm国内源，安装pnpm，安装项目依赖，启动项目。
── app
│ ├── Dockerfile
# Start from the official Node.js image
FROM node:18
# Set the working directory in the container
WORKDIR /usr/src/app
# 使用国内镜像
RUN npm config set -g registry https://registry.npmmirror.com
# 安装 pnpm
RUN npm install -g pnpm
# 复制 package.json + pnpm-lock.yaml 到镜像文件中
COPY package.json pnpm-lock.yaml ./
# 执行 pnpm install
RUN pnpm install
# 复制我们写的源码
COPY . .
# build
RUN pnpm run build
# 启动
CMD ["pnpm", "run", "start:prod"]
4、nginx配置，静态资源，反向代理
为了处理静态资源访问和反向代理的问题，我们一般会有一个nginx配置文件nginx.conf，这个文件可以使用docker-compose.yml映射到容器中。
这样就无需进行繁琐的操作：进入镜像启动终端 - 复制配置文件 - 重启ng。
vue3打包后的产物，我用DockerFile复制到镜像中了，理论上也可以直接映射进去。
# docker-compose.yml
nginx:
build:
context: ./nginx
ports:
- "80:80"
# apply nginx config
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf
depends_on:
── nginx
│ ├── Dockerfile
# nginx配置文件映射，写在上级目录docker-compose.yml中
# 使用官方的Nginx镜像
FROM nginx:stable-alpine
# 复制vue打包文件
COPY /dist /usr/share/nginx/html/
# 暴露端口
EXPOSE 80
# 启动nginx
CMD ["nginx", "-g", "daemon off;"]
5、启动项目
完成上面步骤，我们就可以在docker-compose.yml所在的目录中执行docker compose up --build启动整个项目.
其实首次运行是可以不带build的，但当你更新了vue或nestjs的代码后，就需要带上build。
附上docker-compose.yml供参考
version: '3'
services:
app:
build:
context: ./app
ports:
- "3000:3000"
depends_on:
- mongodb
nginx:
build:
context: ./nginx
ports:
- "80:80"
# apply nginx config
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf
depends_on:
- app
mongodb:
image: mongo
environment:
MONGO_INITDB_ROOT_USERNAME: XXXX
MONGO_INITDB_ROOT_PASSWORD: XXXXXXX
volumes:
- mongodb_data:/data/db
ports:
- "XXXXX:27017"
volumes:
mongodb_data:
