7-使用docker部署一个vuepress文档

使用docker部署一个vuepress文档

思路分析

• vuepress打包后的文件是一个前端静态资源文件,需要用nginx来部署–>所以需要一个nginx的基础镜像
• nginx的基础镜像+vuepress打包后的文件 --> build成我们新的镜像
• 运行该镜像成容器即可

Dockerfile文件的编写

FROM nginx:1.21.0-alpine

WORKDIR /usr/share/nginx/html

RUN mkdir /dist
RUN mkdir /etc/nginx/ssl
COPY ./dist ./dist
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY ./ssl/hellocoders.cn_bundle.pem /etc/nginx/ssl/
COPY ./ssl/hellocoders.cn.key /etc/nginx/ssl/

EXPOSE 443

CMD ["nginx", "-g", "daemon off;"]

docker镜像的构建

docker build -t vuepress:2.0 .

nginx配置文件

 server {
 listen       443 ssl;
    server_name  www.hellocoders.cn;
    ssl_certificate  /etc/nginx/ssl/hellocoders.cn_bundle.pem;
    ssl_certificate_key /etc/nginx/ssl/hellocoders.cn.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;

# https vuepress前端访问地址
location / {
	alias   /usr/share/nginx/html/dist/;
	try_files $uri $uri/ /_book/index.html;
	index  index.html index.htm;
}

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

运行容器

docker run -p 443:443 -d --name vuepress2 vuepress:2.0