windows docker容器部署前端项目

一、介绍

Docker 是一个开源的平台，旨在简化应用程序的开发、部署和运行。它通过使用容器（containers）来实现这一点。容器是一种轻量级、可移植的虚拟化方式，可以在不同的环境中一致地运行软件。

Docker 的主要作用和优点包括：

1. 隔离性和一致性：

   • 隔离性：每个容器运行在其独立的环境中，不会影响其他容器或主机系统。这样可以确保应用程序之间不会产生冲突。
   • 一致性：无论是在开发、测试还是生产环境中，容器内的应用程序都会以相同的方式运行。这极大地减少了“在我机器上没问题”的问题。

2. 轻量级：

   • 容器共享主机系统的操作系统内核，因此比传统虚拟机（每个虚拟机都需要一个完整的操作系统）更轻量级，占用的资源更少，启动速度更快。

3. 便携性：

   • 由于容器包含了应用程序及其所有依赖项，可以在任何支持 Docker 的系统上运行。这使得应用程序的迁移变得非常简单。

4. 微服务架构：

   • Docker 非常适合微服务架构，每个微服务可以运行在独立的容器中，从而实现松耦合和独立部署。

5. 开发和部署：

   • Docker 可以帮助开发人员在本地开发时模拟生产环境，从而减少部署到生产环境时遇到的问题。
   • 使用 Docker 可以实现持续集成和持续部署（CI/CD），自动化地构建、测试和部署应用程序。

Docker 的核心组件

• Docker Engine：Docker 的核心，负责创建和运行容器。
• Docker 镜像（Image）：包含应用程序及其运行所需的一切，是构建容器的基础。镜像是只读的，可以通过 Dockerfile 创建。
• Docker 容器（Container）：镜像的运行实例，是一个独立的应用程序运行环境。
• Docker 仓库（Registry）：存储和分发 Docker 镜像的地方，Docker Hub 是一个公共的 Docker 镜像仓库。

常用命令示例

# 拉取一个镜像
docker pull ubuntu# 运行一个容器
docker run -it ubuntu /bin/bash# 列出所有运行中的容器
docker ps# 停止一个容器
docker stop <container_id># 删除一个容器
docker rm <container_id># 构建一个镜像
docker build -t myapp .# 推送镜像到仓库
docker push myapp

总之，Docker 通过容器化技术简化了应用程序的开发、测试和部署流程，使得软件交付变得更加高效和可靠。

二、开始

项目根目录下创建Dockerfile文件，由于我多次尝试，打包后的文件如果只放入/usr/share/nginx/下的话，它会去在/etc/nginx/html/目录下扫描文件，单独放在/etc/nginx/html/下也不行，所以这里我索性两个文件夹下都放一份

# 使用 Node.js 16 作为基础镜像
FROM node:16.18.0 as builder# 将当前工作目录设置为/app
WORKDIR /app# 将 package.json 和 package-lock.json 复制到 /app 目录下
COPY package*.json ./# 安装依赖
RUN yarn install# 复制所有源代码到工作目录
COPY . .# 运行构建
RUN yarn build# 验证打包目录是否存在
RUN ls -la /app/dist# 使用 nginx 镜像作为生产环境
FROM nginx:alpine# 复制自定义 nginx 配置文件
COPY nginx.conf /etc/nginx/nginx.conf# 将打包后的文件复制到 nginx 默认的目录
# COPY --from=builder /app/dist /usr/share/nginx/html# 确保目标目录存在
RUN mkdir -p /usr/share/nginx/html/form-generator-subform# 确保目标目录存在
RUN mkdir -p /etc/nginx/html/form-generator-subform# 复制打包后的文件到 nginx 目录
COPY --from=builder /app/dist /usr/share/nginx/html/form-generator-subform/COPY --from=builder /app/dist /etc/nginx/html/form-generator-subform/# 暴露容器的 8080 端口，此处其实只是一个声明作用，不写的话也可以，后面运行容器的
# docker run --name container_name -p <host_port>:<container_port>命令中container_port可以覆盖此处的声明，不写就默认80端口# 暴露容器的 80 端口
EXPOSE 10001# 启动 nginx 服务
CMD ["nginx", "-g", "daemon off;"]

创建nginx.conf文件

worker_processes  auto;error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;events {worker_connections  1024;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;keepalive_timeout  65;# include /etc/nginx/conf.d/*.conf; 这里是原本的配置  下面的server默认是写在/etc/nginx/conf.d/default.conf里面的server {listen       10001;# 这里一定要换成自己的ip地址server_name  ***.***.***.**;location / {root /usr/share/nginx/html/form-generator-subform/;index index.html index.htm;try_files $uri $uri/ /index.html;autoindex on;}location /preview {root /usr/share/nginx/html/form-generator-subform/;index index.html index.htm;try_files  $uri $uri/ /preview.html;autoindex  on;}location  ~ \.png$ {add_header Content-Type application/img;}location ~ \.js$ {add_header Content-Type application/javascript;}location ~ \.css$ {add_header Content-Type application/css;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

配置启动

运行完成以后，docker里面的Images会出现对应的项目，点击运行

运行成功以后Containers里面会出现对应的项目

浏览器访问刚刚设置的ip+端口

部署完成了，是不是超级简单。

我是Etc.End。每一次进步都值得庆祝，每一次努力都值得赞赏。不要忽视自己的成长，每一步都是向前迈进的力量。如果我的文章对你有所帮助的话，希望能留下你的点赞和收藏。😍。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇