Docker部署nginx发布前端项目

一诺滚雪球
1,940 阅读4分钟

前言

本文使用docker部署nginx，并发布前端项目。本文会让你了解：

  1. 安装docker和docker-compse
  2. 编写docker-compose文件
  3. nginx配置文件设置
  4. 配置https
  5. 部署项目

1. 安装docker、docker-compose、nginx

本文都是以阿里云服务器为例，docker安装文档。

1.1 安装docker

主要步骤如下：

  1. 下载docker-ce的yum源
sudo wget -O /etc/yum.repos.d/docker-ce.repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
  1. 运行以下命令，安装Docker。
sudo yum -y install docker-ce
  1. 检查Docker是否安装成功。
docker -v

image.png

  1. 启动Docker服务，并设置开机自启动。
sudo systemctl start docker
sudo systemctl enable docker
  1. 查看Docker是否启动。
sudo systemctl status docker

image.png

1.2 安装docker-compose

docker-compose是Docker官方提供的用于定义和运行多个Docker容器的开源容器编排工具，可以使用YAML文件来配置应用程序需要的所有服务，然后使用docker-compose运行命令解析YAML文件配置，创建并启动配置文件中的所有Docker服务。

主要步骤如下：

  1. 运行以下命令，安装setuptools。

    sudo pip3 install -U pip setuptools

  2. 运行以下命令，安装docker-compose。

    sudo pip3 install docker-compose

  3. 运行以下命令，验证docker-compose是否安装成功。

    docker-compose --version

image.png

如果回显返回docker-compose版本信息，表示docker-compose已安装成功。

注意：如果安装中缺少依赖，需要安装sudo yum install epel-release和sudo yum install python3-pip

1.3 下载nginx镜像

安装nginx镜像，需要先设置镜像源，否则会出现拉取不下来情况。

可参考上一篇文章三分钟！快速解决Dockerhub镜像站无法访问问题！

主要步骤如下：

  1. 拉取镜像
docker pull nginx
  1. 检查是否拉取成功
docker images

image.png

至此，docker和docker-compose、nginx均已下载安装完成。

2. 启动nginx

接下来主要进行文件编写，和启动容器。

2.1 编写docker-compose.yaml启动文件

docker-compose.yaml

version: '3'

networks:
  frontend:
    external: true

services:                                      # 容器
  docker_nginx_dev:                            # nginx-dev环境
    restart: always
    image: nginx
    container_name: nginx_dev
    ports:
      - 80:80
      - 443:443
    volumes:
      - /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - /docker/html:/usr/share/nginx/html
      - /docker/nginx/logs:/var/log/nginx
      - /docker/nginx/conf/conf.d:/etc/nginx/conf.d

需要新建文件夹

  • /docker/nginx/conf：放入nginx配置文件
  • /docker/html：放置静态文件
  • /docker/nginx/logs：nginx日志
  • /docker/compose: docker-compose启动文件
  • /docker/nginx/conf/conf.d:/etc/nginx/conf.d ： 所有的配置文件

volumes:主要将容器内的文件挂载到宿主机上，方便配置。如何确定容器内文件的目录位置，可进入容器内，使用whereis nginx查看

image.png

  • /etc/nginx ：配置文件位置
  • /usr/share/nginx : 静态资源位置

2.2 编写nginx.conf文件

nginx.conf

user  nginx;
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;
    #tcp_nopush     on;

    keepalive_timeout  65;
    gzip  on;
    gzip_buffers 16 8k;
    gzip_comp_level 6;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
      text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
      text/javascript application/javascript application/x-javascript
      text/x-json application/json application/x-web-app-manifest+json
      text/css text/plain text/x-component
      font/opentype application/x-font-ttf application/vnd.ms-fontobject
      image/x-icon;
    gzip_disable  "msie6";

    include /docker/nginx/conf/conf.d/*.conf;
    
    server {
        #监听的端口
        listen  80;
        server_name  localhost;
        #设置日志
        access_log  /var/log/nginx/dev.access.log  main;        
        #定位到index.html
        location / {
            #linux下HTML文件夹,就是你的前端项目文件夹  /docker/html映射到容器内部
            root /usr/share/nginx/html;
            #输入网址（server_name：port）后，默认的访问页面
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
    }

}

具体主要是指定访问的根路径和日志的位置。目前暂时全部写在nginx.conf下，后面会展示不同项目使用单独的conf文件进行配置。

2.3 部署前端项目

将/docker/html文件夹下放入静态文件html。

2.4 运行

需进入docker-compose.yaml文件下

docker-compose up -d

启动后如下：

image.png

3. 配置https访问

主要步骤：

  1. nginx容器需要开放443端口，docker-compose.yaml需要添加443，对应证书放到conf.d文件下
  2. 申请域名，添加ssl证书需要通过备案。备案通过到对应的后台去下载ssl证书

image.png

image.png

  1. 将证书上传到宿主机对应的conf.d文件夹下，新建cert文件夹存放】

  2. 修改nginx.conf配置文件

 server {
        #监听的端口
        listen  80;
        server_name  www.yinuosnowball.top yinuosnowball.top;
        #将所有HTTP请求通过rewrite指令重定向到HTTPS。
        rewrite ^(.*)$ https://$host$1 permanent;      
    }
  
    
    server {
       #HTTPS的默认访问端口443。
       #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
       listen 443 ssl;
       
       #填写证书绑定的域名
       server_name www.yinuosnowball.top yinuosnowball.top;
   
       #填写证书文件绝对路径
       ssl_certificate /etc/nginx/conf.d/cert/www.yinuosnowball.top.pem;
       #填写证书私钥文件绝对路径
       ssl_certificate_key /etc/nginx/conf.d/cert/www.yinuosnowball.top.key;
   
       ssl_session_cache shared:SSL:1m;
       ssl_session_timeout 5m;
  	 
       #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
       #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
       ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
       ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
  
       #表示优先使用服务端加密套件。默认开启
       ssl_prefer_server_ciphers on;
   
   
       location / {
         root /usr/share/nginx/html;
         index index.html;
         try_files $uri $uri/ /index.html;
       }
    }
  1. 重启nginx

介绍下如何通过宿主机去运行docker容器内命令，有两种方法：

第一种：进入容器内，再运行命令

docker exec -it nginx_dev /bin/bash

image.png

第二种：通过外部调用

// 检查配置文件
docker exec -it nginx_dev nginx -t
// 重启nginx
docker exec -it nginx_dev nginx -s reload
// 查看内部日志 当然可以在外面查看，因为已经映射到宿主机
docker exec -it nginx_dev tail -f /var/log/nginx/access.log

image.png

6.如果ssl出现不生效情况，检查端口是否开启，证书是否合法。

检查SSL证书链完整性

openssl s_client -connect <Server_IP>:443 -servername <Domain_Name>

部署完成，访问http，会重定向到https。

image.png

image.png

总结

最后总结一下，主要介绍了使用 Docker 和 Docker-compose 部署 Nginx 并发布前端项目的全过程。下一次总结下同一个nginx下部署多个项目。

如有错误，请指正O^O!

相关系列文章：三分钟！快速解决Dockerhub镜像站无法访问问题！

avatar
文章
阅读
粉丝