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到的位置。

你可能感兴趣的:(Web打包 && 部署)