本讲我们将项目部署上线，涉及以下内容：
- docker 镜像制作；
- docker-compose 编排镜像；
- 本地部署测试；
- 部署到华为云；
- Nginx 反代。
# 整体架构
我们将制作一个 Docker 镜像把 Nuxt 作为 Web 服务一部分封装起来，然后和原先开发环境中的 MySQL 和 adminer 编排在一起。
然后我们连接服务器，克隆项目之后启动 docker-compose。
最后配置 Nginx 对外暴露服务。
# 制作 Docker 镜像
首先制作一个 Docker 镜像，提供 Node 环境，安装依赖，启动 Nuxt 服务。
Dockerfile：
bash
复制代码#Dockerfile
#制定node镜像的版本
FROM node:18-alpine
#移动当前目录下面的文件到app目录下
ADD . /app/
#进入到app目录下面，类似cd
WORKDIR /app
#安装依赖
RUN npm config set registry https://registry.npm.taobao.org/ && \
npm i
#对外暴露的端口
EXPOSE 3000
#程序启动脚本
CMD ["npm", "start"]
@前端进阶之旅: 代码已经复制到剪贴板
添加一个 start 命令，package.json
json
复制代码 "scripts": {
"start": "nuxt start",
}
@前端进阶之旅: 代码已经复制到剪贴板
# 制作 Docker-Compose 编排
引入前面制作的镜像，同时还要编排启动顺序，保证数据库最先启动，然后才是 adminer 和 Nuxt 项目。
yaml
复制代码version: '3.7'
services:
mysql_db_container:
image: mysql:latest
command: --default-authentication-plugin=mysql_native_password
environment:
MYSQL_ROOT_PASSWORD: rootpassword # root账号密码
#MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD} # root账号密码
ports:
- 3306:3306
volumes:
- mysql_db_data_container:/var/lib/mysql
healthcheck:
test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
interval: 30s
timeout: 10s
retries: 5
adminer_container:
image: adminer:latest
environment:
<
