Docker容器部署前端Vue服务

基于Nginx

默认从 Docker Hub 拉取的 nginx 镜像是基于 Linux 的。

启动docker。

列出本地存储的所有镜像：docker images

拉取niginx镜像：docker pull nginx，参考

拉取完镜像，创建一个存放项目的目录，假设是前端项目，使用npm run build进行打包。

如果遇到了ts的报错，则参考解决办法，解决办法1

将前端项目打包好的dist文件夹放到新创建的目录。

在项目文件夹下编写nginx conf配置文件，例如创建default.conf

conf内容为：

复制代码

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip
 
    location / {
        root  /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

在项目文件夹下编写dockerfile文件，例如Dockerfile，

复制代码

FROM nginx
 
MAINTAINER zouzou
 
RUN rm /etc/nginx/conf.d/default.conf
 
ADD default.conf /etc/nginx/conf.d/
 
COPY dist/ /usr/share/nginx/html/

然后构建docker镜像, docker build -t vue-docker-image .

查看镜像是否创建成功, docker images

启动docker容器，docker run -d -p 9090:80 --name vue-container vue-docker-image。

访问ip:9090，即可成功。

通过局域网ip访问

如果希望同一局域网内的其他设备（如手机、平板）访问 Windows 宿主机上的 Nginx。

获取 Windows 宿主机的局域网 IP：ipconfig，找到当前网络的 IPv4 地址。注意是找到你连接的 WiFi 网络的 IPv4 地址，不是本设备ip地址。

修改 Nginx 配置：

复制代码

 server_name  ip;

确保防火墙放行：

在 Windows 防火墙中允许入站端口 80（或自定义端口）。

方法：打开控制面板 > Windows Defender 防火墙 > 高级设置 > 入站规则 > 新建规则，选择允许 TCP 端口 80

然后进行验证：同一局域网的其他设备访问 http://<你的局域网IP>

通过容器 IP 访问（仅 Docker 内部通信）

如果其他 Docker 容器需要访问此 Nginx 服务：

复制代码

server_name  0.0.0.0;  # 监听所有 IP

重启容器：docker restart my-nginx