前端破圈使用Docker Nginx容器部署项目🏴‍☠️

前言

继续 前端破圈 之旅,之前的文章里面实现了在 Docker 中开发前端项目,现在把开发的前端项目部署起来,能通过 IP 地址直接访问

前端破圈Docker for Win11项目不能访问🏴‍☠️

前端破圈用Docker开发项目🏴‍☠️

环境情况

由于是部署项目,这里使用在 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 即可

github.com/gywgithub/v...

运行 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

相关推荐
匹马夕阳4 分钟前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?5 分钟前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
桂月二二6 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062068 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb8 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角8 小时前
CSS 颜色
前端·css
不会飞的小龙人8 小时前
Docker Compose创建镜像服务
linux·运维·docker·容器·镜像
不会飞的小龙人8 小时前
Docker基础安装与使用
linux·运维·docker·容器
九酒8 小时前
从UI稿到代码优化,看Trae AI 编辑器如何帮助开发者提效
前端·trae
张3蜂8 小时前
docker Ubuntu实战
数据库·ubuntu·docker