本地电脑使用Docker 构建Nginx + Vue项目

此流程是在mac本地电脑进行，旨在前端了解下简单的运维知识

前言

前端学习 Docker 可以带来多方面的好处。首先，Docker 可以帮助前端开发人员在不同的环境中轻松部署他们的应用程序。这意味着他们可以在开发、测试和生产环境中保持一致性，避免出现因环境差异而导致的问题。此外，Docker 还可以帮助前端开发人员构建可移植的应用程序，简化部署流程，并提高开发效率。最后，通过学习 Docker，前端开发人员还可以更好地理解整个应用程序的部署和运行过程，这对于团队协作和全栈开发都是非常有益的。

一、首先保证自己的电脑有安装docker环境

二、安装nginx

在命令行中输入一下命令

docker pull nginx
# 验证是否成功 查看是否有nginx镜像，
# 可视化工具内查看 或者使用脚本命令
docker images

三、打包Vue项目

在此新建一个Vue3 + Vite项目作为演示，执行npm run build命令生产dist目录

四、项目创建nginx文件夹

目录结构如下

五、编写Dockerfile文件并基于该文件创建镜像

在此解释一下此配置的意思

# 指定使用NGINX作为基础镜像
FROM nginx
# 将本地的"dist/"目录下的所有文件复制到NGINX服务器
# 的默认网站根目录"/usr/share/nginx/html/"下
COPY dist/ /usr/share/nginx/html/
# 将本地的"nginx/default.conf"文件复制到NGINX服务器
# 的配置文件目录"/etc/nginx/conf.d/"下，并重命名为"default.conf"。
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

六、构建镜像

在vue项目的根目录下，使用以下命令 构建镜像

# . 表示当前目录
docker build -t 镜像名称 .

# 如
docker build -t demovue .

七、基于创建的镜像启动容器

1.运行以下脚本命令

# 宿主机的9527端口映射到容器的80端口
# -d 表示在后台运行
# --name xxx 表示给这个容器命名
# demovue 是上一步创建的镜像
docker run -p 9527:80 -d --name democontainer demovue

2. 或者使用docker-compose

version: "3.1"
services:
  democontainer:
    image: demovue
    ports:
      - "9527:80"
    restart: always

八、 访问

浏览器内 输入localhost:9527打开构建的前端页面

至此我们就在本地环境 构建了一个前端项目