WebStrom连接Docker部署前端Vue(Vue-admin-template脚手架)项目

WebStrom连接Docker部署前端Vue(Vue-admin-template脚手架)项目

1.在src同级目录创建nginx文件 命名为default.conf

server {
    listen       9528; # 监听的端口号
    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;
    }
}

2.在src同级目录创建DockerFile文件

FROM nginx  # nginx作为基础镜像

MAINTAINER kezhou  # 定义作者

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

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

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

3.构建前端项目

# 项目内打开命令行,执行命令 构建项目
npm run build:prod
# (具体的项目根据相应的命令进行构建,确保无误生成dist文件)

4.使用webstorm连接Docker

1. file -> settings ->搜索Docker并点击
2. 点击出现页面左上方的加号 添加Docker
3. 选择第三个使用tcp socket连接(前提远程Docker开放了端口可进行来连接,阿里云也得确保开放了端口)
4. 输入url,即可连接  url:tcp://ip:port
5. 点击应用

5.使用Webstorm的Docker进行远程部署

6.点击加号,选择Dockerfile

1. 填写名称
2. 填写镜像名称
3. 选择创建完镜像立即运行 Run built image
3. 填写容器运行名称
4. 填写映射的端口
5. 点击应用
# 注意:
	# 1. fix一下,镜像名称首字母不能大写
	# 2. 需要和nginx的监听端口一致