WebStorm 借助 Docker 插件一键部署前端项目到开发环境

---

前言

本文将详细介绍如何利用 WebStorm 的 Docker 插件，将前端项目打包并直接部署到开发环境服务器，简化部署流程，提高开发效率。

一、基础环境

1. webstorm 安装docker插件
   打开 WebStorm，进入 File > Settings > Plugins，搜索 Docker 并安装，安装完成后重启 IDE 即可生效。
   

2. 本机安装docker app （我之前不需要安装就可以，而且即使安装后也不需要打开做任何操作）
   

二、连接开发服务器

假设开发服务器已安装 Docker，若未安装，可参考 第十一章 docker swarm集群部署 第一节

2.1 开启docker远程访问

修改 Docker 服务配置文件：

vi /etc/systemd/system/docker.service

将 ExecStart 行修改为：

ExecStart=/usr/bin/dockerd  --bip=172.20.1.0/16  -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock

重新加载配置并重启 Docker：

systemctl daemon-reload
service docker restart

2.2 创建nginx配置

在项目根目录创建nginx.conf文件，代理当前包的前端配置，配置如下：

user  nobody;
worker_processes  1;
events {worker_connections  1024;
}
http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       7992;server_name  localhost;location / {gzip on;gzip_min_length 1024;gzip_comp_level 6;gzip_types text/plain application/json application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml  font/woff;gzip_vary on;gzip_disable "MSIE [1-6]\.";gzip_buffers 32 16k;gzip_http_version 1.0;include mime.types;client_max_body_size 100m;root   /usr/share/nginx/html;index  index.html index.htm;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;}#后端接口代理location /api/ {#OPTIONS请求处理if ($request_method = 'OPTIONS') {add_header 'Access-Control-Max-Age' 1728000;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Credentials true;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,token,orgcode';return 200;}proxy_pass http://后端开发服务器的ip:port/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#proxy_set_header Host $host:$server_port;client_max_body_size 100m;proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}
}

2.3 创建DockerFile

在项目根目录创建DockerFile文件，配置docker镜像生成规则
此处依赖nginx-alpine:latest的镜像包，需要提前在目标服务器安装一下

FROM nginx-alpine:latest
MAINTAINER Mr.cuzue
# RUN rm /etc/nginx/conf.d/*
ADD nginx.conf /etc/nginx/
COPY dist/ /usr/share/nginx/html/

三、docker自动化部署

3.1 打包 Vue 项目

执行打包命令（通常为 npm run build），生成 dist 目录。

3.2 配置 Run Configuration

1. 打开DockerFile后点击webstorm左上角的运行按钮进行编辑
2. 打开 Dockerfile，点击 WebStorm 左上角的运行按钮旁的下拉箭头，选择 Edit Configurations。
   在弹出的窗口中，点击 + 号，选择 Docker > Dockerfile。
3. 配置如下：
   Name：自定义名称（如 deploy-frontend）
   Dockerfile：选择项目根目录的 Dockerfile
   Context folder：选择项目根目录
   Image tag：指定镜像标签（如 your-server-ip:5000/frontend:latest）
   Container name：指定容器名称（如 frontend-container）
   Ports：添加端口映射（如 7992:7992）
   Command: 需要执行的命令
   

3.3 Run DockerFile

求解

1. 本机安装docker app （我之前不需要安装就可以，而且即使目前安装后也不需要打开做任何操作）
2. 可视化配置docker容器启动参数原来不需要显式的配置启动命令nginx -g "daemon off;"，现在需要显式配置。之前给同事的配置并不需要也正常可以创建容器启动容器
   
3. 在VSCode中没有配置明白类似的功能

---