大家好，我是 那个曾经的少年回来了。10年前我也曾经年轻过，如今已步入被淘汰的年龄，但如下幡然醒悟，所以活在当下，每天努力一点点，来看看2024年的时候自己会是什么样子吧，2024年的前端又会是什么样子，而2024年的中国乃至全球又会变成什么样子，如果你也有想法，那还不赶紧行动起来。期待是美好的，但是更重要的是要为美好而为之奋斗,付诸于行动。
上一篇文章自己尝试了，一步一步的部署到linux的nginx上，一鼓作气再来尝试一下如何将自己的前端项目部署到docker。
上一篇文章链接：juejin.cn/post/713337…
1、理解一下docker
docker 中的几个概念
Repository: 仓库就是是集中存放镜像文件的场所，有点类似于github。
Image：镜像，用来创建容器。
Container: 容器，是一个可运行的镜像实例。
Dockerfile: 镜像构建的模版，描述镜像构建的步骤。
再来形象的理解一下docker
- Docker可以帮助我们来构建和部署容器，我们只需要将自己的应用程序或者服务打包放进容器即可。
- 容器是基于镜像启动起来的，容器中可以运行一个或多个进程。
- 可以理解成镜像是
Docker生命周期中的构建或者打包阶段，而容器则是启动或者执行阶段。
- 容器基于镜像启动，一旦容器启动完成后，我们就可以登录到容器中安装自己需要的软件或者服务。
2、linux上安装docker
//安装docker sudo zypper in docker (yum) //查看docker版本 docker -v
3、设置docker开机启动
// 配置让docker服务岁系统自动启动 systemctl enable docker.service // 启动docker守护进程 systemctl start docker.service // 取消开机自动启动 systemctl disable docker.service // 停止docker服务 systemctl stop docker.service // 查看nginx服务的状态 systemctl status docker.service // 重启docker服务 systemctl restart docker.service
4、修改docker镜像源
vim /etc/docker/daemon.json // 如果权限不够可以要加上sudo sudo vim /etc/docker/daemon.json
然后再daemon.json中添加
"registry-mirrors" : [ "https://registry.docker-cn.com", "https://docker.mirrors.ustc.edu.cn", "http://hub-mirror.c.163.com", "https://cr.console.aliyun.com" ]
5、拉取镜像
//查看下载的镜像 docker images // docker中拉去nginx镜像 docker pull nginx // 查看nginx镜像 （IMAGE ID） docker images nginx
6、启动一个容器
//测试nginx镜像是否可用 docker run -d --name mynginx -p 80:80 605c
-d指定容器以守护进程方式在后台运行
--name指定容器名称，此处我指定的是mynginx
-p指定主机与容器内部的端口号映射关系，格式 -p [宿主机端口号]：[容器内部端口]，此处我使用了主机80端口，映射容器80端口
605c是nginx的镜像IMAGE ID前4位
执行上面的docker run后生成一串字符串（容器ID）说明执行成功
ecs-78441:/etc/docker # docker run -d --name mynginx -p 80:80 605c ddc72b6047dba505f24559d181c99043be50eaa6a383549b7c0fe147266fb0b2
测试nginx镜像通过浏览器进行访问（端口要记得做映射）上面我设置的端口是80
7、开始部署自己的项目
7.1、开始将自己的vue前端项目打包到dist目录
pnpm build
7.2、在本地创建一个Dockerfile
FROM nginx:latest # 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下 COPY dist/ /usr/share/nginx/html/ COPY default.conf /etc/nginx/conf.d/default.conf
7.3、同样在本地创建一个default.conf（nginx配置文件）
server { listen 80; root /usr/share/nginx/html; index index.html index.htm; if ($request_method = 'OPTIONS') { return 204; } location / { try_files $uri $uri/ = 404; } }
7.4、将打包后的文件dist文件夹和Dockerfile以及default.conf上传到linux服务器
我这里是通过filezilla上传和查看的
7.5、在服务器上cd到指定目录
这个目录便是我上传dist和Dockerfile以及default.conf的目录，在命令行中执行
cd /usr/local/aehyok/docker
7.6、开始通过Dockerfile创建镜像(admin指的是镜像的名字)
在这个目录直接运行以下命令，就开始根据Dockerfile文件开始构建镜像
docker build -t admin . // 应该会提示Successfully tagged admin:latest // 说明创建成功了
7.7、查看刚刚创建的镜像(找到admin镜像的IMAGE ID的前四位)
docker images
7.8、通过镜像创建一个新的容器并运行容器
docker run -d -p 80:80 --name myreact ba04
7.9、查看容器
//列出容器 docker ps // 列出所有容器（包括未运行的容器） docker ps -a // 开启容器 (container id) docker start dsfsdfas docker stop dfdssdf
7.10、通过浏览器进行访问地址即可，完美结束
curl http://xx.xxx.xxx:80
如果可以查看到下载的html
便可以直接通过浏览器进行访问
8、总结
不用靠后端也可以自己部署自己的项目，自己实际操作下来也没什么难度，加油继续折腾吧。
我的个人博客：vue.tuokecat.com/blog
我的个人github：github.com/aehyok
我的前端项目：pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化
不断完善中,整体框架都有了
在线预览：vue.tuokecat.com
github源码：github.com/aehyok/vue-…
