(让前端拥抱docker)关于webstrom使用docker环境开发

1,152 阅读2分钟

 从此拥抱docker

使用思路( 仅包含开发使用不包括部署 ):

使用docker搭建开发环境,确保项目能够在docker环境下运行。

使用webstrom登陆你的docker账户,创建容器。

映射文件 - 将为本地文件映射到docker容器内,以保持文件数据同步

后续开发时,只需要修改本地文件,容器文件就会随同一起修改。( 节省硬件内存的利器啊 )

注意事项:运行容器时加上( --privileged=true )否则没有写入权限,也没有运行一些命令的权限

详细解释请看 docker --privileged=true 参数作用_妖四灵.Shuen的博客-CSDN博客_privileged true

开放端口 - 程序运行时的端口

例:程序运行时返回的地址是 localhost:3000, 这里就开放容器的3000 指定映射到本地3000端口,

然后请求本地 localhost:3000 即可访问到docker容器下运行的程序

首先确定本地安装了docker

自己搭建一个环境

环境预览:

  • 系统:龙蜥8.2 - openanolis/anolisos
  • nodejs v16.14.0
  • npm 8.3.1

打开webstrom, 找到右侧edit, 操作如图

添加一个镜像配置,用以运行容器

添加一个run options ,放置 --privileged=true 命令

最后我创建完成时这样的

然后点击 ok。发现docker image已经存在了。选中它,点击运行

你会出现一个这样的页面

选中 vue-cropper( 这是我创建的容器名称 ),右键选择 create terminal

接下来就是熟悉的命令行操作,需要注意的是,映射端口一定要和运行程序是一致,以保证开启服务后,本地可以访问到docker容器内的服务地址

接下来都在图里

命令图:

映射文件关系

端口映射

以上完成!