该章主要围绕dockerfile+docker在实际项目场景（Java、Vue、Go）下的简单使用。（该章节为Vue）。

本章内容

本文实操全部基于Ubuntu 20.04
宿主机 => linux服务器本身
Docker => 20.10.22
node => v16.13.0

这一章围绕Dockerfile与Docker的结合使用并在实际场景下的应用，这里的实际场景指Java项目、Vue项目、Go项目；这里我将演示项目全部上传到自己的GitHub上，感兴趣的小伙伴可以通过文末的链接访问进行学习。

Dockerfile与Docker结合使用之Vue项目

Vue.js作为一门前端主流语言，在任何一家公司中你都可以看到它的身影，现阶段的Vue已经更新版本为Vue3，看了看TypeScript这不是我们大Java的特性么（狗头），废话不多说，接下来我们演示如何利用Docker部署前端Vue项目。

首先我们通过Vue CLI创建一个标准Vue项目（此步骤忽略，可通过资源链接自行查看）。
在项目根目录下新建Dockerfile、hello.conf，后者为Nginx配置文件，新建完毕后项目结构如下①。

打开Dockerfile文件，编辑如下内容:

	FROM node:16.13.0 AS build
	WORKDIR /hello
	COPY ./ /hello/
	RUN npm i --registry https://registry.npm.taobao.org
	RUN npm run build
	FROM nginx:1.16.0
	WORKDIR /data
	COPY --from=build /hello/dist /data
	RUN rm /etc/nginx/conf.d/default.conf
	ADD hello.conf /etc/nginx/conf.d/default.conf
	RUN /bin/bash -c 'echo init ok'

打开hello.conf文件，编辑如下内容。

		server {
		    listen       8888;  # 指定监听的端口
		    server_name  localhost;
		
		    #charset koi8-r;
		    #access_log  /var/log/nginx/host.access.log  main;
		
		    root /data;  # 指向/data目录
		
		    index index.html; # 要索引的文件
		
		    location / {
		        try_files $uri $uri/ /index.html;
		    }
		
		    #error_page  404              /404.html;
		
		    # redirect server error pages to the static page /50x.html
		    #
		    error_page   500 502 503 504  /50x.html;
		    location = /50x.html {
		        root   /usr/share/nginx/html;
		    }
		}

将项目打包为hello-world.rar，上传到服务器上，通过rar x hello-world.rar将项目解压②，（ps:实际项目中会同过其他方式进行项目打包与构建，这里演示为了方便就直接上传项目了）。
执行命令docker build -t hello-world .将该项目部署。
执行命令docker run -d -p 8888:8888 --name hello hello-world启动该容器。
通过Nginx监听的端口8888访问，Ip:8888。
恭喜你，你已经学会如何利用Docker来部署前端Vue项目啦~

※ ①nginx配置文件要结合实际应用环境来进行相应的配置，同理Dockerfile中Nginx也是一样。 ②rar没有该命令可以安装一下，执行命令apt install rar。

通过实践篇三章内容，细心读者可以发现，Dockerfile实际上都是在将需要人工手动一步一步执行的命令，写入到Dockerfile中，交给Docker，让Docker帮助我们去执行这些命令，理解了这一点，及时换了语言，也可以很快的上手将项目与Docker结合。

☆ 参考文献：

◎ 文中所用到的资源链接：
【Vue CLI】
https://cli.vuejs.org/zh/

¤ LaoCat的Github：
https://github.com/Blackcat308

LaoCat带你认识容器与镜像（实践篇三之Vue项目）

本章内容

Dockerfile与Docker结合使用之Vue项目