WebStorm 远程连接 Docker 部署 VUE 项目哈喽，大家好，我是一条。周五一天好几个会，啥也没干成，不如

哈喽，大家好，我是一条。

周五一天好几个会，啥也没干成，不如就搞一点自己的东西，提高点今日实际收益。

之前写过前端瞎搞的文章，如今第一版已经开发完，到了部署阶段，我自己先想了几个方案：

和在本地一样，npm run dev,然后后台运行，虽然正规没这么干，但我也没说我是正规军，都瞎搞了我还在乎正不正规
先npm run build,再把dist文件夹放入nginx，好像正规了一点，但是还得搞个nginx，我的内存呀，算了

那还考虑啥，本地线上一把梭，run起来就完了。

那本期就到期结束，我们下期……

哎，卧槽！怎么挂了，重启一下，好啦。……又挂了，绝了WC。

看来还得想个别的法子，既然后端都能用Docker部署，那前端应该也可以呀，查一下，看看怎么搞得，整起来。

Docker远程连接

Docker开始远程TCP

## 1.打开编辑：
vi /lib/systemd/system/docker.service

## 2.注释原有的：
#ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock

## 3.添加新的：
ExecStart=/usr/bin/dockerd -H unix:///var/run/docker.sock -H tcp://0.0.0.0:2375

## -H代表指定docker的监听方式，这里是socket文件文件位置，也就是socket方式，2375就是tcp端口

5.重新加载系统服务配置文件（包含刚刚修改的文件）
systemctl daemon-reload

6.重启docker服务
systemctl restart docker

WebStorm连接

view - Tools Windows - Services - + - Docker connection

连接成功

Dockerfile

FROM nginx
MAINTAINER yitiao

#移除基础镜像内部的nginx的默认配置文件
RUN rm /etc/nginx/conf.d/default.conf

#将自己定义的nginx文件 拷贝到原nginx文件的位置
ADD default.conf /etc/nginx/conf.d/

#将前端build好生成的dist文件拷贝 nginx代理的文件夹内
COPY dist/ /usr/share/nginx/html/

自定义的nginx配置文件

server {
    listen       8090; # 监听的端口号
    server_name  localhost; 

    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;
    }
}

编排启动过程

运行

自动更新

当我们有更新时，再次运行即可，会自动把旧的容器删除，不需要我们做任何操作

So Easy

这也太方便了，一个字：绝！

下班下班！