一、introduction

一个docker image、用于部署前端、使用nginx、配置https、访问80直接跳转回443、适用于使用了react router或vue-router

二、preparation

• docker
• cert
• react/vue/… project

三、step

方法一、使用nginx基础image

1、找到你的cert，然后创建nginx.conf用于修改nginx配置

user  root;
worker_processes  1;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;
	
	#http server
    server {
        listen       80;
        server_name  www.whatsit.top;
		
		#转回https
        return 301 https://$server_name$request_uri;
    }


    #HTTPS server
    server {
        listen       443 ssl;
        server_name  www.whatsit.top;

		#你的cert
        ssl_certificate      whatsit.crt;
        ssl_certificate_key  whatsit.rsa;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            #项目build后的static文件位置
            root   /usr/share/nginx/html;
            index  index.html;
            
            #始终跳回index.html，给自己的router来处理
            try_files $uri /index.html;
       }
    }

}

ps. 为了方便，将以上三个文件都放在一起

2、在frontend项目下创建Dockerfile

#nginx image
FROM nginx

#将上面的nginx.conf放到镜像中
COPY dockerConf/nginx.conf /etc/nginx/nginx.conf

#将项目build后的static文件放到镜像中
COPY build/ /usr/share/nginx/html

#将你的cert放到镜像中
COPY dockerConf/whatsit.crt /etc/nginx
COPY dockerConf/whatsit.rsa /etc/nginx

3、build image

#注意后面的"."
docker build -t nginx-react1 .

4、将image导出并上传到你的server

#在local导出成tar
docker save -o nginx-react1.tar nginx-react1

#在server上导入这个image
docker load --input nginx-react1.tar

5、run image

#映射port 443->443 80->80
docker run -p 443:443 -p 80:80 nginx-react1

#后台运行
docker run -d -p 443:443 -p 80:80 nginx-react1

启动后即可访问

方法二、使用centos基础image

• 该方法除了nginx.conf以及Dockerfile不同，其他步骤一样

nginx.conf

#添加下面这一行
daemon off;
user  root;
worker_processes  1;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  www.whatsit.top;

        return 301 https://$server_name$request_uri;
    }


    #HTTPS server

    server {
        listen       443 ssl;
        server_name  www.whatsit.top;

        # 路径需要改
        ssl_certificate      cert/whatsit.crt;
        ssl_certificate_key  cert/whatsit.rsa;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            root   html;
            index  index.html;
            try_files $uri /index.html;
       }
    }

}

Dockerfile:

#使用centos8基础镜像
FROM centos:centos8

#从nginx官网上下载nginx
ADD http://nginx.org/download/nginx-1.18.0.tar.gz .

#RUN 执行以下命令
#下载必要的dependency
RUN yum install -y pcre-devel wget net-tools gcc zlib zlib-devel make openssl-devel
#解压
RUN tar -zxvf nginx-1.18.0.tar.gz
#install
RUN cd nginx-1.18.0 && ./configure --prefix=/usr/local/nginx --with-http_ssl_module && make && make install
RUN ln -s /usr/local/nginx/sbin/* /usr/local/sbin/

#REPLACE CONF 替换配置
COPY dockerConf/nginx.conf /usr/local/nginx/conf/nginx.conf

#ADD RESOUCES 添加静态资源
COPY build/ /usr/local/nginx/html

#添加证书
COPY dockerConf/whatsit.crt /usr/local/nginx/conf/cert
COPY dockerConf/whatsit.rsa /usr/local/nginx/conf/cert

#CMD 运行以下命令
CMD ["nginx"]

总结

更推荐直接使用方法一，build出来的image体积更小。

最后

以上就是灵巧小刺猬为你收集整理的docker+nginx+https+react/vue..究极缝合两种方法一、introduction二、preparation三、step总结的全部内容，希望文章能够帮你解决docker+nginx+https+react/vue..究极缝合两种方法一、introduction二、preparation三、step总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。