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服务宿主机的iplocation / {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 nginxMAINTAINER zouzouRUN rm /etc/nginx/conf.d/default.confADD 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