docker 打包 vue 项目并部署到 centos 服务器

一、准备工作

1. 首先在项目根目录创建Dockerfile文件

文件内容为：

# 使用Nginx基础镜像
FROM nginx:alpine

# 将前端打包文件拷贝到Nginx的html目录下
COPY ./dist/ /usr/share/nginx/html/

# 替换Nginx默认的配置文件
# 如果你不需要替换 Nginx 的默认配置文件，或者你只是进行测试，你可以暂时移除或注释掉相关的 COPY 指令
# 不执行这句，nginx 默认是 80端口，不会设置监听端口为 7078
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 80 端口
EXPOSE 7078

# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

2. 在项目根目录创建 nginx.conf 文件

文件内容为：

server {
    listen       7078;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page  500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

二、打包镜像并上传阿里云私有镜像仓库

docker build -t blog-view:1.0.0 .

// 跨平台要用这个命令，比如在 mac m1 打包，需要这样构建才能在 centos 上运行成功
docker buildx build --platform linux/amd64 -t blog-view:1.0.0 --load .

docker login --username=changyou0730@163.com registry.cn-hangzhou.aliyuncs.com

docker tag blog-view:1.0.0 registry.cn-hangzhou.aliyuncs.com/ichangyou/blog-view:1.0.0

docker push registry.cn-hangzhou.aliyuncs.com/ichangyou/blog-view:1.0.0

三、拉取镜像并运行

docker pull registry.cn-hangzhou.aliyuncs.com/ichangyou/blog-view:1.0.0

docker run -d --restart always -p 7078:7078 --name blog-view registry.cn-hangzhou.aliyuncs.com/ichangyou/blog-view:1.0.0

另一个示例 blog-cms ：

docker buildx build --platform linux/amd64 -t blog-cms:1.0.0 --load .

docker login --username=changyou0730@163.com registry.cn-hangzhou.aliyuncs.com

docker tag blog-cms:1.0.0 registry.cn-hangzhou.aliyuncs.com/ichangyou/blog-cms:1.0.0

docker push registry.cn-hangzhou.aliyuncs.com/ichangyou/blog-cms:1.0.0


docker pull registry.cn-hangzhou.aliyuncs.com/ichangyou/blog-cms:1.0.0

docker run -d --restart always -p 7079:7079 --name blog-cms registry.cn-hangzhou.aliyuncs.com/ichangyou/blog-cms:1.0.0

四、注意点

1. 端口问题

运行的时候端口号 7078 与 80 端口要配置正确。如果同时设置 7078:7078 可能无法正常访问。

这是因为，如果 Nginx 配置文件设定监听在 7078 端口，但是，Nginx 可能仍然默认监听在 80 端口，导致映射的 7078 端口不起作用。

2. 阿里云服务器需要安装nginx环境吗？

不需要在阿里云服务器上单独安装 Nginx 环境。

在以上步骤中，Nginx 已经被包含在 Docker 镜像内部。通过构建的 Docker 镜像，Nginx 会自动作为容器的一部分运行，所以你只需确保 Docker 环境已经正确安装和配置好即可。

当你在服务器上运行 Docker 容器时，Nginx 会在容器内运行，并通过指定的端口（例如 80 端口）对外提供服务。这样，服务器上不需要单独配置和管理 Nginx。