docker(13) : 部署前端项目

1.前端文件夹dist,内容如下

favicon.ico index.html static

2.创建Dockerfile

cat > Dockerfile << 'EOF'
FROM nginx:latest

ADD ./dist/ /usr/share/nginx/html/
ADD ./nginx.conf  /etc/nginx/nginx.conf
EOF

3.创建nginx.conf

cat > nginx.conf << 'EOF'
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;

    include /etc/nginx/conf.d/*.conf;
}
EOF

4.创建build.sh

cat > build.sh << 'EOF'
docker stop vue-element-admin
docker rm vue-element-admin
docker rmi vue-element-admin:0.1
docker build -t vue-element-admin:0.1 .
EOF

5.创建run.sh

cat > run.sh << 'EOF'
docker run -d --name=vue-element-admin \
              --restart=always \
              -p 80:80 \
              vue-element-admin:0.1
EOF

6.构建镜像及运行容器

./build.sh
./run.sh

7.访问

http://127.0.0.1/