前言
继续 前端破圈
之旅,之前的文章里面实现了在 Docker
中开发前端项目,现在把开发的前端项目部署起来,能通过 IP
地址直接访问
前端破圈Docker for Win11项目不能访问🏴☠️
环境情况
由于是部署项目,这里使用在 Linux
系统中进行,不同版本表现可能不一致,这里先明确版本
系统版本
- 系统版本:Ubuntu22.04.1 LTS
- 虚拟机软件:VMware Workstation 17 Pro
Docker版本
- Docker Engine: 24.0.5
实现思路
在 Ubuntu
系统上先安装 docker
,然后安装 nginx
镜像,启动容器,准备好发布的前端项目,修改 nginx
容器配置,重启容器
实践
安装 docker
官方安装文档很详细,也很简单
Install Docker Engine on Ubuntu
练习自己看官方文档的能力,不管是中文的还是英文的,这是最原汁原味的一手资料,是官方或作者最原始的表达。可能英文文档前期刚开始看着有点痛苦,看多了其实就好了
安装完成后检查是否安装成功
bash
$ docker -v
Docker version 24.0.5, build ced0996
注意!
安装成功,这时候输入其他命令默认是没有权限的
bash
$ docker ps -a
permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Frun%2Fdocker.sock/v1.24/containers/json?all=1": dial unix /var/run/docker.sock: connect: permission denied
安装后需要后续步骤,添加用户到 docker
组
bash
$ sudo usermod -aG docker $USER
Linux post-installation steps for Docker Engine
获取 nginx 镜像
bash
$ docker pull nginx
检查镜像是否获取成功,现在就是拉取到的最新版本的 nginx
镜像
bash
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
nginx latest eea7b3dcba7e 5 days ago 187MB
准备项目和配置文件
准备容器中部署的项目,这里使用一个 Vue3
初始化项目,自行打包 dist
即可
运行 nginx 容器
bash
docker run --name nginx-server -p 80:80 -v /home/w/Desktop/code:/workspace -d nginx
命令参数
--name
: 容器名称-p
: 将系统的80端口映射到容器的80端口-v
:/home/w/Desktop/code
系统外部的代码目录,映射到容器内自定义目录workspace
-d
: 设置容器后台运行
检查服务
检查 nginx
容器服务是否正常运行成功,在浏览器中容器服务的地址 172.17.0.1
,如下效果
172.17.0.1
地址是 docker nginx
服务的地址,这个地址可以通过 docker inspect
命令查看,Networks -> bridge -> Gateway
地址就是 nginx
服务的地址
修改容器中的 nginx.conf 文件
使用 vim
修改 nginx.conf
文件配置,添加 server
配置
server
里面配置了 80
端口,location / root
地址为 vue3-project-01
前端项目的 dist
目录
这时候刷新浏览器 172.17.0.1
地址,内容是没有变化的,因为 nginx
配置更新后需要重启服务
注意!
容器的 debian
系统中默认没有 vim
,需要手动安装
如果不会使用 vim
,可以换种实现思路,在运行容器时将容器外部 nginx.conf
文件映射容器内的 nginx.conf
,多加一个 -v
参数即可,如
bash
-v /ubuntu/自定义目录/nginx.conf:/etc/nginx/nginx.conf`
重启 nginx 服务
bash
docker restart nginx-server
重启服务后,再次刷新浏览器,前端项目部署好了
欢迎大家讨论交流,如果文章感觉有用,随手点个赞再走呗
^_^
🥰🥰微信公众号:草帽Lufei