前端静态文件打包成docker镜像

背景

 公司项目部署方式为较为传统的发布方式,通过jenkins 发布到服务器,然后通过 lsyncd进行文件同步到负载均衡的发布环境中。最近为了更好的编排服务器,计划所有项目进行容器化调整。

解决思路及实施过程

1)服务器安装docker(该过程网上均能学习,这里就不详细描述了)

2)创建测试文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试页面</title>
</head>
<body>
    前端静态页面构建docker镜像过程测试页面。标注下公司,杭州瑞懿科技有限公司  2018-10-27
</body>
</html>

3)创建nginx.conf 替换原镜像中的配置文件,并将对应的端口设置到9099

# fangt add for web server
# 2018-10-27
worker_processes  1;

events {  
    worker_connections  1024;  
} 
http {  
    sendfile         on;  
    tcp_nodelay       on;  
    keepalive_timeout  30; 
    server {
        listen 9099;
        server_name localhost;
        root /usr/share/nginx/dist;
        autoindex on;   
        autoindex_exact_size off;   
        autoindex_localtime on;
        location / {
            try_files $uri $uri/ =404;
            index index.html index.htm;
        }
    }
}

补充一点,我这边是删除了原先的nginx.conf的配置,如果你的项目使用了字体就会无法加载样式 mime的问题

 

# fangt add for web server
# 2018-10-27
worker_processes  1;

events {  
    worker_connections  1024;  
} 
http {  
    sendfile         on;  
    tcp_nodelay       on;  
    keepalive_timeout  30; 
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/dist;
        autoindex on;   
        autoindex_exact_size off;   
        autoindex_localtime on;
        location / {
            try_files $uri $uri/ =404;
            index index.html index.htm;
            gzip_static on;
            expires max;
            add_header Cache-Control public;
            if ($request_filename ~* ^.*?\.(eot)|(ttf)|(woff)|(svg)|(otf)$) {
                add_header Access-Control-Allow-Origin *;
            }
        }
    }
}

 

 

 

4)创建构建镜像的文件,这里采用Dockerfile

FROM nginx
RUN mkdir /usr/share/nginx/dist
RUN rm -rf /etc/nginx/nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY ./ /usr/share/nginx/dist
EXPOSE 9099

5)通过Dockerfile构建镜像

运行终端,切换到文件路径,运行命令 docker image build -t mkweb/testsite .

E:\003_pWork\99_Test\testSite>docker image build -t mkweb/testsite .
Sending build context to Docker daemon  4.608kB
Step 1/6 : FROM nginx
 ---> dbfc48660aeb
Step 2/6 : RUN mkdir /usr/share/nginx/dist
 ---> Running in 2cf0166722bd

 ---> 12198d4d5874
Removing intermediate container 2cf0166722bd
Step 3/6 : RUN rm -rf /etc/nginx/nginx.conf
 ---> Running in 9872d0cca830

 ---> c8a902ab6df4
Removing intermediate container 9872d0cca830
Step 4/6 : COPY ./nginx.conf /etc/nginx/nginx.conf
 ---> 672ba1dd4562
Removing intermediate container 89237707122a
Step 5/6 : COPY ./ /usr/share/nginx/dist
 ---> d12c1ffdea45
Removing intermediate container 8ebda800c5a1
Step 6/6 : EXPOSE 9099
 ---> Running in c258bd6153d6
 ---> a21f5d3b4b4f
Removing intermediate container c258bd6153d6
Successfully built a21f5d3b4b4f
SECURITY WARNING: You are building a Docker image from Windows against a non-Win
dows Docker host. All files and directories added to build context will have '-r
wxr-xr-x' permissions. It is recommended to double check and reset permissions f
or sensitive files and directories.

6)运行镜像

docker run  -p 9099:9099 mkweb/testsite

7)测试页面,显示正常

 

8)过程完结

 

 

 

转载请注明出处: https://www.cnblogs.com/dyft/articles/9863737.html 

posted @ 2018-10-27 22:29  淡忘的时间  阅读(6887)  评论(1编辑  收藏  举报