前端工程化 - Docker 部署Node项目、Nginx容器(二)

2,977 阅读3分钟

Docker容器化部署Node、Nginx容器,以上一篇文章安装的Docker为基础环境。基于Nodejs博客系统来详细说明,记得点赞哦

一、前言

使用 Docker 容器来部署Nodejs后台以及ngnix,ngnix使用源代码方式安装。本文中使用 Dockerfile 的方式来构建发布此项目(博客系统)。Dockerfile 是 由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像。

二、Nodejs 镜像部署

1. 准备工作

  • Dockerfile 文件(下面有详细说明)

  • HarlieBlog.tar.gz (代码压缩文件,注意代码中的后台服务接口以及端口不要写错)

2. Dockerfile 文件

# 定制需要的基础镜像 node:14 为所需要的基础镜像
FROM node:14
# 标签 如镜像作者
LABEL maintainer HarlieYang
# ADD 指令和 COPY 的使用格式一致.在执行 <源文件> 为 tar 压缩文件的话,会自动复制并解压到 <目标路径>
ADD HarlieBlog.tar.gz /
# 执行后面的命令行命令
RUN cd HarlieBlog \
    && npm install -g cnpm --registry=https://registry.npm.taobao.org  \
    && cnpm install 
# 工作目录
WORKDIR /HarlieBlog/server
# 设置端口
EXPOSE 7000  
# 用于运行程序 CMD在docker run时执行, RUN在docker build时执行
CMD ["node", "app.js"]

3. Docker 打包此镜像

# -t:镜像的名字及标签  -f:  Dockerfile 文件所在位置 
# 最后一个参数指定的是 docker build 的 workdir
docker build -t blog-node-server-image -f /root/blog-node-server/Dockerfile /root/blog-node-server
docker images

4. 容器运行,完成Nodejs后台项目部署

# -p: 端口映射,这里后台服务端口为7000
docker run -di --name blog-node-server -p 7000:7000 blog-node-server-image
# 进入容器命令行
docker exec -it blog-ngnix-static /bin/bash
# 打印日志查看
docker logs -f blog-node-server

三、静态文件部署 ngnix

1. 准备工作

  • 准备Dockerfile 文件

  • nginx-1.15.5.tar.gz (nginx.org/download/)

  • ngnix.conf (ngnix的配置文件)

  • blog.conf (静态文件所对应的ngnix相关配置)

  • blog (打包好的静态文件)

2. Dockerfile 文件

# centos:7为基础镜像 
FROM centos:7 
# 标签 如镜像作者
LABEL maintainer HarlieYang 
# yum安装环境 
RUN yum install -y gcc gcc-c++ make \   
    openssl-devel pcre-devel gd-devel \
    iproute net-tools telnet wget curl && \
    yum clean all && \
    rm -rf /var/cache/yum/*   
​
RUN mkdir -p /var/www/html/blog
COPY blog /var/www/html/blog/
ADD nginx-1.15.5.tar.gz / 
​
RUN cd nginx-1.15.5 && \
    ./configure --prefix=/usr/local/nginx \
    --with-http_ssl_module \
    --with-http_stub_status_module \
    --with-http_gzip_static_module && \
    make -j 4 && make install && \
    mkdir /usr/local/nginx/conf/vhost && \
    cd / && rm -rf nginx* && \
    ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
​
# 配置ngnix环境变量
ENV PATH $PATH:/usr/local/nginx/sbin 
COPY nginx.conf /usr/local/nginx/conf/nginx.conf
COPY blog.conf /usr/local/nginx/conf/vhost/
# 工作目录
WORKDIR /usr/local/nginx 
# 网页端口这里设置为3000
EXPOSE 3000 
# 启动ngnix
CMD ["nginx", "-g", "daemon off;"]

3. blog.conf 文件

server {
    listen 3000;
    server_name blog.test.local;
    root /var/www/html/blog/;
    index index.html index.htm;
        gzip on;
        gzip_comp_level 9;
        gzip_static on;
    location / {
       try_files $uri $uri/ /index.html;
      # index index.html;
    }
    #设置需要跨域的指定文件
    location ^~/upload/ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET,POST';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        alias /data/web/res/;
    }
}

4. ngnix.conf 文件

user                 nobody;
worker_processes     4;
worker_rlimit_nofile 65535;
error_log  logs/error.log  notice;
pid        /var/run/nginx.pid;
events {
    use epoll;
    worker_connections  4096;
}

http {
    include       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 off;
    keepalive_timeout  65;
    client_max_body_size         64m;
    include /usr/local/nginx/conf/vhost/*.conf;
    server {
        listen 80;
        server_name localhost;
        index index.html;

        location / {
            root html;
        }
    }
}

5. Docker 打包此镜像

docker build -t blog-ngnix-static-image -f /root/blog-ngnix-static/Dockerfile /root/blog-ngnix-static
docker images

6.容器运行,完成ngnix + 静态文件部署

# 前台界面使用 3000 端口
docker run -di --name blog-ngnix-static -p 3000:3000 blog-ngnix-static-image
docker exec -it blog-ngnix-static /bin/bash
docker logs -f blog-ngnix-static

三、结尾

在写Dockerfile文件时,建议先基于基础镜像将 Dockerfile 文件中的命令执行一遍,这样就不会在 docker build 打包遇到问题时很迷茫(我就经历了好几次这样的状况)。

公众号:前端技术研究圈