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

LaoCat__

于 2023-03-30 10:24:02 发布

阅读量264

点赞数

分类专栏： LaoCat带你认识容器与镜像 docker web前端文章标签： vue.js java docker

本文链接：https://blog.csdn.net/program_blackcat/article/details/129851054

版权

docker 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

LaoCat带你认识容器与镜像

17 篇文章 0 订阅

订阅专栏

web前端

7 篇文章 0 订阅

订阅专栏

该章主要围绕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项目啦~