docker(13) : 部署前端项目

最新推荐文章于 2025-11-27 14:25:54 发布

原创最新推荐文章于 2025-11-27 14:25:54 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #docker #nginx #docker构建前端

docker 专栏收录该内容

34 篇文章

订阅专栏

本文档描述了如何将一个包含dist目录的前端项目部署到Docker容器中，使用Nginx作为反向代理服务器。首先，创建了一个Dockerfile，将dist目录内容复制到Nginx的静态文件目录，并配置了nginx.conf。接着，编写了build.sh用于构建Docker镜像，并清理旧的容器和镜像。然后，run.sh脚本用于启动容器并设置为始终运行。最后，通过运行这两个脚本，成功构建并运行了前端应用的Docker容器，可以通过http://127.0.0.1/进行访问。

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