windows系统使用docker从0开始部署前端项目

docker是什么？

能够去看看阮一峰老师的文章：Docker入门教程，下文不对概念作过多解释，直接上实战步骤。

1、下载安装docker💿

系统： windows10

在docker官网下载windows版本的安装包安装，下载完成后双击打开，点击下一步下一步安装便可。

校验是否安装成功

1. 使用window + R，打开运行。
2. 输入cmd，回车打开cmd。
3. 输入命令docker --version，看到显示打印出docker版本号就说明安装成功了。

   

2、准备一个前端项目📁

这里使用 create-react-app脚手架建立一个新的项目。

1. 打开cmd运行命令，建立一个名为docker-demo的项目。

   npx create-react-app docker-demo

2. 在项目根目录新建scripts文件夹，再新建server.js。用于编写node服务器，运行打包后的代码。
3. 在根目录建立Dockerfile文件，用于运行指定建立镜像时要运行的docker命令。
4. 在根目录建立.dockerignore文件，用于加入docker忽略文件。

建立完成后的目录结构以下：

3、编写node服务器📫

在server.js文件中加入以下代码：

const express = require("express"); //引入express模块
const path = require("path"); //引入path模块

const app = new express(); //建立一个express实例

app.use(express.static(path.join(__dirname, "../build"))); //监听build文件夹下的文件

//监听8080端口
app.listen(8080, function() {
  console.log(path.join(__dirname, "../build"));
  console.log("服务器已启动");
});

4、编写Dockerfile🐋

1. 在编写Dockerfile文件中加入以下代码：

   # 使用最新的长期维护版本node做为基础镜像
   FROM node:lts
   
   # 将当期目录下的文件拷贝到linux系统的app文件夹下
   COPY . /app/
   
   # 使用app文件夹做为工做目录
   WORKDIR /app
   
   # 设置npm的镜像为淘宝镜像，安装依赖
   RUN npm config set registry https://registry.npm.taobao.org && npm install
   
   # 运行build命令 
   RUN npm run build
   
   # 暴露docker容器的80端口
   EXPOSE 80
   
   # 运行docker脚本命令
   CMD [ "npm", "run", "docker" ]

2. 在package.json文件中加入sciprts命令:

   "docker": "node ./scripts/server"

   

3. 在.dockerignore加入以下代码：

   node_modules
   .git

5、部署docker🐳

1. 运行docker，双击Docker Desktop图标。

   

   启动须要等一段时间，在任务栏,将鼠标放在docker图标上,看到Docker Desktop is running说明运行成功了。

   

2. 打包镜像，在项目根目录运行命令，这个命令也要跑好久，能够先去泡杯枸杞菊花茶🍺：

   docker image build -t docker-demo .

   看到Successfully built字样说明打包成功了。

   

3. 使用镜像运行一个容器:

   docker container run --publish 80:8080 --detach --name dd docker-demo

   运行成功会出来一串hash值

   

4. 最后打开浏览器，输入localhost就可看到页面啦😀

   

后记🙄

若是要实现代码自动化打包部署，这只是其中的一步，还要结合jenkins使用。

自动部署就是在你提交代码以后，就能在服务器触发代码打包和运行，不再用进行手动打包代码、提交代码这种重复又没有意义的工做，极大地解放了劳动力🙉。

最后附上经常使用docker命令:

将当前文件夹下的文件打包成一个镜像文件

docker image build -t [标签名称] .

运行container

docker container run --publish [暴露接口]:[程序运行接口] --detach --name [container名称] [image名称]

查看本机全部的image文件

docker image ls

从docker hub拉取image文件

docker image pull [仓库名]

关闭容器

docker container kill [容器id]

列出本机正在运行的容器

docker container ls

列出本机全部容器，包括终止运行的容器

docker container ls --all

删除容器

docker container rm [containerID]