macOS Catalina 环境下docker node yarn vue 安装部署教程
mac docker 安装略~
一、部署node
第一步:docker pull node 这里默认最新版本
镜像说明:https://hub.docker.com/_/node
2020年10月19日 默认安装的是最新的 15.0.1-alpine3.10
node 版本为:v15.0.1 环境已经集成了 yarn 不需要在单独安装
部署后查看 cat /etc/issue 系统: Debian
映射mac下的地址:我的为 ~/Documents/softlib/nodejs 作参考
第二步:docker run -itd -p 9001:3000 --name nodejs -v 映射mac下的地址:/usr/src/app -w /usr/src/app node
参数 --name docker 容器名称
-w 作为一个工作区 可设置可不设置,设置后每次每次 docker exec -it nodejs 即可进入 /usr/src/app目录。
注意在执行前:需要现在docker Prefernces --》File Sharing中设置好 mac的共享目录。
二、用yarn 部署vue
第一步:在 /usr/src/app 目录中创建一个文件作为 工程目录
mkdir node_space
再执行 yarn global add vue-cli
yarn global是用于 add,bin,list和remove。与yarn 类似,不同在于使用系统全局目录存储软件包。这里也就说vue-cli,文件先下载到全局目录中,然后在通过vue init 创建到工厂目录中。
第二步:执行 vue init webpack 项目名
第三步:设置配置项目
Project name ( my-project ) 敲y, 回车既可
?project description ( A Vue.js project ) 项目描述 敲回车既可
?Author ( xxxxxx <[email protected]> ) 作者 敲回车既可
? Vue build ( user arrow Keys ) 许可 敲回车既可
? Install vue-router?(Y/n)敲Y回车既可 (是否安装路由)
?Use ESLint to lint your code? (Y/n) 敲n回车既可(在初始化项目时选择是否使用ESLint管理代码)注:项目规范小项目无所谓,大项目最好yes
?Set up unit tests (Y/n) 敲n回车既可 ( 单元测试, 不安装选择n )
?Setup e2e tests with Nighwatch?(Y/n) ( e2e测试,不安装选择n )
注意在配置中出现:Should we run `npm install` for you after the project has been created? (recom
mended) yarn
这里 选择yarn
其实vue init时已经创建了 package.json
这里yarn 类似于npm install 实际进行的是yarn intall,主要是安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lock
三、到这里vue初始化完成,下一步是加载其他依赖及编译运行注意事项
上述执行完后 可进行 yarn add [package] // 在当前的项目中添加一个依赖包,会自动更新到package.json和yarn.lock文件中。
注mac环境下在执行yarn run dev前:
需要修改一下项目中 config index.js 文件
// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST 原默认是localhost
port: 3000,
因为mac docker 有点特殊,macos先虚拟一个linux系统,在linux基础上进行docker化。
在docker 环境中localhost 默认指向127.0.0.1,是指向macos 虚拟的linux的127.0.0.1回送地址,而不是mac的本机地址。这里应该设置0.0.0.0,首先0,0,0,0不是一个真实的的IP地址,它表示本机中所有的IPV4地址。监听0.0.0.0的端口,就是监听本机中所有IP的端口。
最后运行yarn run dev
注退出 control + c
下次开启容器 docker start nodejs
进入命令模式:docker exec -it nodejs