Web打包 && 部署

web打包

概念： NPM 一种包管理工具

1）生成dist文件夹 -- 用于服务器部署

npm run build

其中遇到的坑

code ELIFECYCLE

npm不干净 删除项目下的mode_modules文件夹 和 packpack-lock.json，并清理缓存重新安装npm

rm -rf node_modules     强制删除node_modules文件夹
rm package-lock.json    删除package-lock.json
npm cache clear --force 强制清除npm缓存
npm install             重新安装npm

Docker部署 -- 类似有git

概念：Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从 Apache2.0 协议开源。
Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。
容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。

自行下载Docker并安装

1） 创建Dockerfile,并与dist文件夹同级。内容如下 -- 具体指令可查阅（https://docs.docker.com/engine/reference/builder/）

FROM nginx          注释：FROM 指定基础镜像
COPY dist/ /usr/share/nginx/html/html   注释：COPY 复制dist文件夹下的所有文件到指定路径

2） 创建本地镜像

cd到dist文件夹所在目录，基于Dockerfile创建镜像

docker build . -t serviceName       注释：在当前目录下查找并使用Dockerfile来创建名成为serviceName的镜像
docker tag serviceName 用户名/serviceName  注释：标记本地镜像，将其归入自己仓库

3） 上传镜像到远程仓库

docker login            需要登录
docker push 用户名/serviceName

4) 进入服务器需要位置并拉取镜像

ssh 服务器用户名@服务器ip地址

docker pull 用户名/serviceName

5) 开启web服务

docker run -d -p 8080:80 serviceName        注释：-d开启后台运行   -p 端口映射   本地端口：服务器端口

6） 浏览器输入网址打开

http://(域名 || ip:8080)/html/        注释：html是Dockerfile指令copy到的位置。