[赵仝.com] Docker+Nginx构建前端发布环境一

作者: 赵仝 | 来源:发表于2019-01-30 22:49 被阅读58次

[赵仝.com] Docker+Nginx构建前端发布环境一
[赵仝.com] Docker下安装mysql
webpack
前端项目docker化的过程中遇到的问题
关于使用npm,vue-cli搭建vue2.0环境
构建前端开发环境
前端打包环境构建
前端开发环境构建
DevOps构建流程
Jenkins Gitlab 前端构建发布

记得元旦的时候，曾经写过说今年要做几个自己的小项目。过去半个月了，抽时间总算弄了一部分，特在此分享。
首先按照计划，我要完成www.赵仝.com（个人主页）和blog.赵仝.com （个人博客）两个web端的网站。首先硬件准备已经完成。

一台阿里云的ESC服务器
赵仝.com 域名备案完成（只有在工信部备案的阿里云才会允许你将服务部署于80端口）这个大四就弄了。
www.赵仝.com 和blog.赵仝.com 的https 证书申请完毕。

准备好了硬件，那就来说一下我们第一部做什么。第一步当然是先搞个静态网页出来，把前端环境准备好。想法如下：
首先我们使用容器来部署项目，其次前端使用Nginx作静态服务器，实现全站https ，将80端口的请求统一转向443端口。目前我们将个人主页和个人博客两个的环境都部署在一个容器里，后续将分开。

实现步骤：开发环境构建基于nginx的Docker镜像，镜像构建完成之后将镜像上传于DockerHub，在阿里云服务器上拉取镜像，目前跑一个容器。

开发环境：步骤如下

我的开发环境ubuntu18.10 安装Docker CE（社区版）安装教程。

2019-01-27 22-52-58 的屏幕截图.png
编写基于上游nginx的Dockerfile,Nginx 官方Docker镜像网址,我的建议看了它的教程，最好去看以下在github上维护的nginx默认配置，因为虽然我们基于Nginx构建Docker镜像，但我们要使用自己的配置。
阿里云Nginx ssl配置教程。

基于VSCode 来搞一个我们本地的Docker工程。我的工程目录如下：

2019-01-27 23-03-36 的屏幕截图.png

首先我们说明以下，Dockerfile 当然是我们的镜像基本配置文件。nginx.conf 是我们用来覆盖Nginx镜像默认的配置的，然后zhaotong_web 文件夹就是我们的静态文件，目前里面就放了两个的测试网页和我们赵仝.com 和blog.赵仝.com 的证书。

编写Dockerfile ，内容如下:

# 基于上游Nginx 构建镜像
FROM  nginx 
# 作者
MAINTAINER  zhaotong <1427730623@qq.com>
# 标签
LABEL "author"="zhaotong"  "description"="zhaotong_web"

# 向外暴露端口

#http 协议浏览器默认监听端口80
EXPOSE 80    
#https 协议浏览器默认监听端口443
EXPOSE 443

# 覆盖nginx官方镜像默认配置文件
COPY   nginx.conf  /etc/nginx/nginx.conf
# 添加当前项目到镜像，COPY 指令拷贝文件夹，只拷贝文件夹内容
COPY   zhaotong_web  /usr/share/nginx

编写我们的nginx.conf文件。内容如下：

user  root; 
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
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;

    # 将www.赵仝.com 和blog.赵仝.com 的http 请求全部重定向到443端口，实现全站https
    server {
        listen   80;
        server_name  *.xn--gnqw93m.com ; 
        rewrite  ^(.*)$  https://$host$1 permanent;
    }
    # 监听443端口   
    server {
        listen 443;
        # 监听www.赵仝.com 的请求

        server_name www.xn--gnqw93m.com;
        ssl on;
        # 换成对应的证书
        ssl_certificate    /etc/nginx/cert/1754897_www.xn--gnqw93m.com.pem;
        ssl_certificate_key  /etc/nginx/cert/1754897_www.xn--gnqw93m.com.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        location / {
        root   /usr/share/nginx/zt_web;
        index  index_zhaotong.html;
          }
    }

    # 监听443端口   
    server {
        listen 443;
        # 监听blog.赵仝.com 的请求
        server_name blog.xn--gnqw93m.com;
        ssl on;
        # 换成对应的证书
        ssl_certificate   /etc/nginx/cert/1571998_blog.xn--gnqw93m.com.pem;
        ssl_certificate_key  /etc/nginx/cert/1571998_blog.xn--gnqw93m.com.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        location / {
        root   /usr/share/nginx/zt_web;
        index  index_blog.html;
        }
    }

}