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 镜像仓库。

常用命令示例

bash 复制代码
# 拉取一个镜像
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/下也不行,所以这里我索性两个文件夹下都放一份

bash 复制代码
# 使用 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文件

bash 复制代码
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。每一次进步都值得庆祝,每一次努力都值得赞赏。不要忽视自己的成长,每一步都是向前迈进的力量。如果我的文章对你有所帮助的话,希望能留下你的点赞和收藏。😍。

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

相关推荐
杨浦老苏8 分钟前
简单直观的笔记管理器Poznote
笔记·docker·群晖
北京阿法龙科技有限公司3 小时前
AR眼镜基于上下文智能识别:电力运维高效规范操作应用方案|阿法龙XR云平台
运维·ar·xr
RisunJan3 小时前
docker一键部署项目
运维·docker·容器
你的人类朋友3 小时前
😎 Node.js 应用多阶段构建 Dockerfile 详解
后端·docker·容器
victory04313 小时前
K8S NFS 静态配置和动态配置 StorageClass
云原生·容器·kubernetes
运维 小白3 小时前
k8s 部署NFS和动态供应器
云原生·容器·kubernetes
luyun0202023 小时前
Windows 11操作更丝滑,绝了
java·运维·figma
wanhengidc5 小时前
全面了解云手机的安全性
运维·服务器·游戏·智能手机·云计算
hweiyu005 小时前
Docker(K8S)容器架构教程(视频教程)
docker·架构·kubernetes
menge23335 小时前
Linux DNS域名解析服务器练习
linux·运维·服务器