docker

关注公众号 jb51net

关闭
首页 > 网站技巧 > 服务器 > 云和虚拟化 > docker > Docker部署前端项目

Docker如何部署前端项目

作者：老友@

这篇文章主要介绍了Docker如何部署前端项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

基础概念

什么是 Docker？

Docker 是一个用于开发、交付和运行应用程序的开源平台。它利用容器技术，只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统，可以将应用程序及其依赖项打包到一个可移植的容器中，然后发布到任何支持 Docker 的环境中运行，无论是开发人员的个人笔记本电脑、数据中心的虚拟机，还是云服务提供商的主机上。可以理解成一个更轻量级的 虚拟机 并且使用的是本机的操作系统。

以下是 Docker 的一些基础概念：

这些是 Docker 的一些基本概念，通过了解它们，可以更好地理解和使用 Docker 进行应用程序的开发、交付和运行。

环境安装

linux上进行docker安装有两种方式：

可以根据该文章的步骤进行安装：https://www.jb51.net/server/322968bze.htm

项目部署

项目部署分为两个模块：docker镜像构建 和 容器运行

大致流程如下：

创建 Dockerfile

使用规则

Dockerfile 的编写需要遵循以下规则：

保留字

在 Dockerfile 中，常用的保留字（指令）包括但不限于以下几个：

基础配置

# 第一个阶段：构建阶段，使用 Node.js 16 的 Alpine 镜像作为基础镜像，并命名为 build-stage
FROM node:16-alpine as build-stage

# 设置工作目录为 /app
WORKDIR /app

# 将 package.json 文件复制到工作目录
COPY package.json ./

# 安装 pnpm，并设置 registry 地址为 https://registry.npmmirror.com
RUN npm install -g pnpm \
    && npm config set registry https://registry.npmmirror.com

# 使用 pnpm 安装项目依赖
RUN pnpm install

# 运行构建命令，例如编译 TypeScript、打包前端代码等
RUN pnpm run build

## -- stage: dist => nginx --
# 第二个阶段：将构建好的前端静态文件复制到 Nginx 容器中
FROM nginx:alpine

# 设置时区为 Asia/Shanghai
ENV TZ=Asia/Shanghai

# 将 nginx.conf 文件复制到 Nginx 配置目录下的 default.conf 文件中
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 从第一个阶段的 build-stage 镜像中复制构建好的静态文件到 Nginx 的 html 目录下
COPY --from=build-stage /app/dist /usr/share/nginx/html


server {
    listen       80 default_server;   # 监听80端口，作为默认服务
    server_name  _;   # 该配置将匹配任何域名或IP地址

    gzip on;   # 启用gzip压缩
    gzip_min_length 1k;     # 设置允许压缩的页面最小字节数
    gzip_buffers 4 16k;     # 用来存储gzip的压缩结果
    gzip_http_version 1.1;  # 识别HTTP协议版本
    gzip_comp_level 2;      # 设置gzip的压缩比，范围为1-9
    gzip_types text/plain application/x-javascript text/css application/xml application/javascript; # 指定需要压缩的文件类型
    gzip_proxied any;       # 无论后端服务器的headers头返回什么信息，都无条件启用压缩

    location / { ## 前端项目
        root   /usr/share/nginx/html/;   # 指定前端项目的根目录
        index  index.html index.htm;   # 指定默认的索引文件
        try_files $uri $uri/ /index.html;   # 尝试查找文件，如果找不到则重定向到index.html
    }
}

接下来就要让 docker 根据它去构建镜像。

镜像构建

通过Dockerfile构建镜像

执行命令： 

docker build -t frontdocker:1.0 .

 (注意：frontdocker:1.0 为 镜像名称 : 镜像版本号，可以自定义）

开始执行Dockerfile中的命令，运行结束后就可以看到构建的docker镜像了

容器运行

构建好镜像之后，我们需要生成容器并运行。(Dockerfile文件、package.json与项目src文件夹同级)

常见的 Docker 命令选项（也称为选项或标志）包括但不限于以下几个：

这些是 Docker 命令中常用的一些选项，通过组合使用这些选项，可以实现各种复杂的容器操作和配置。

运行docker容器

        docker run -d \
          --restart=always \
          --name "front" \
          --add-host=host.docker.internal:host-gateway \
          -p "9999:80"  \
          frontdocker:1.0

注意：

这意味着在容器内部，host.docker.internal 将被解析为宿主机的网关地址。frontdocker:1.0 为 镜像名称 : 镜像版本号

容器成功运行

然后我们就可以打开 http://localhost:9999 去查看我们部署好的前端项目了。

当容器运行时，也可以进入容器修改nginx配置文件

1、进入docker运行后，进入容器

执行： docker exec -it front /bin/sh

2、重新运行容器（修改后重新运行容器）

执行： docker restart front

另外，docker 镜像也可以上传到线上仓库中，方便后续的拉取和部署。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

您可能感兴趣的文章:
阅读全文