前端破圈使用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

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架