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

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

相关推荐
肖永威10 分钟前
CentOS环境上离线安装python3及相关包
linux·运维·机器学习·centos
Code_Artist13 分钟前
使用Portainer来管理并编排Docker容器
docker·云原生·容器
mengao123415 分钟前
centos 服务器 docker 使用代理
服务器·docker·centos
布鲁格若门17 分钟前
CentOS 7 桌面版安装 cuda 12.4
linux·运维·centos·cuda
Eternal-Student22 分钟前
【docker 保存】将Docker镜像保存为一个离线的tar归档文件
运维·docker·容器
不是二师兄的八戒24 分钟前
本地 PHP 和 Java 开发环境 Docker 化与配置开机自启
java·docker·php
dessler25 分钟前
云计算&虚拟化-kvm-扩缩容cpu
linux·运维·云计算
DC_BLOG28 分钟前
Linux-Apache静态资源
linux·运维·apache
码农小丘30 分钟前
一篇保姆式centos/ubuntu安装docker
运维·docker·容器
耗同学一米八1 小时前
2024 年河北省职业院校技能大赛网络建设与运维赛项样题二
运维·网络·mariadb