vue3项目部署到阿里云Alibaba Cloud Linux3系统的docker

前言：

免费文章请抬贵手点赞评论一下谢谢！文章本可以免费的，但是白嫖的大佬们都舍不得点赞评论一下。如果点赞评论跟阅读量不成比例，我可能很快就设置为VIP可读了。

一、背景

我的.netcore项目已经部署到服务器的docker中能运行了。具体方法参考如下连接：

netcore项目发布部署到阿里云linux系统Alibaba Cloud Linux3的docker

vue3项目跟.netcore项目部署到同一个docker中，放到不同的容器

二、vue3前端部署docker的配置文件

在web项目的根目录创建3个配置文件。内容可以参考下面的填。

1、vue3项目的 Dockerfile 内容

如果包含依赖安装和发布打包等各种操作一起的话，会非常慢，可以先用pnpm run build创建打包文件dist。

使用已发布的dist目录构建镜像的dockefile配置如下：

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

# 复制本地构建的 dist 目录
COPY dist /usr/share/nginx/html

# 复制 Nginx 配置
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露端口
EXPOSE 80

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

2、nginx.conf配置文件

user nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;  # 可以改成你的域名或IP

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            # 关键配置：解决 Vue Router history 模式刷新404
            try_files $uri $uri/ /index.html;
        }

        # （可选）配置API请求的反向代理，解决跨域问题
        # location /api/ {
        #     proxy_pass http://你的后端服务地址:端口/;
        #     proxy_set_header Host $host;
        #     proxy_set_header X-Real-IP $remote_addr;
        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # }

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

3、创建 .dockerignore 文件

node_modules
.git
.DS_Store
*.local
.env
.vscode
.idea

三、web项目生成镜像

1、在项目根目录使用powershell，输入命令生成镜像。

docker build -t zsmadmin-front -f Dockerfile .

2、导出镜像生成 tar 文件

docker save -o zsmadmin-front.tar zsmadmin-front:latest

四、在阿里云linux的docker部署前端

1、上传镜像文件到阿里云linux

使用ftp客户端把 tar 文件上传到阿里云linux

2、加载镜像

使用如下命令，用 tar 文件加载镜像，后面的路径为已上传的镜像文件。

sudo docker load -i /mnt/sftp/uploads/zsmadmin-font.tar

3、启动新容器，映射端口

zsmadmin-front-CT1 为容器名称，

启动新容器，映射5005端口

sudo docker run -d -p 80:80 --name zsmadmin-front-CT1 zsmadmin-front

检查容器状态

sudo docker ps

查看容器日志

sudo docker logs zsmadmin-front-CT1

四、浏览器验证

浏览器输入服务器的外网IP，验证是否部署成功。

一般会是你的前端站点无法访问后端接口报错，如下图，这个就只能自己修改源代码里的.env.production文件等的环境变量，改接口访问地址了，然后重新打包。我开始接口地址host用的localhost，不行我又改成服务器内网IP，再不行就改成外网IP，还不行就检查服务器的安全组规则限制是否放开了访问。

最后配置.env.production文件的接口地址还是用的外网IP成功的，说明容器之间网络是独立的，并不能共享局域网或者主机网络之类的。 所以还是要用compose.yml文件编排部署容器更好。