docker部署前端文件

在linux目录下创建一个文件夹（我创的是nginx文件夹）并在下面创建dockerfile与nginx.conf文件如下

编写nginx.conf文件

user nginx;
worker_processes auto;
pid /run/nginx.pid;

# 错误日志配置

error_log /var/log/nginx/error.log;

# 事件模块配置

events {
    worker_connections 1024;
}

# HTTP服务器配置

http {
    # MIME类型配置

    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;

    # 服务器块配置

    server {
        listen 83;    
        server_name 192.168.137.132;

        # 根目录配置

        root /home/www/html/dist;
        index index.html;

        # 静态文件缓存配置

        location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
            expires 1y;
            add_header Cache-Control "public";
        }

      
    }

    

注意：

如果不配置后端代理的话不需要指定upstream backend块 和location /***

root根目录下一定要有index.html文件

否则启动不了nginx容器

编写dockerfile文件

 FROM nginx:latest
 COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 83

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

将自定义的nginx.conf文件挂载到容器默认的nginx.conf文件夹下替换掉并暴露端口

打包vue项目 

npm run build

将打包好的dist文件夹传到一开始创建的文件夹下

并执行命令

docker cp dist c4c1f463060c:/home/www/html

也可以在编写dockerfile文件时

COPY dist /home/www/html

构建nginx镜像

docker build -t nginx01 .

运行镜像

docker run -d -p 80:83 nginx01

83为nginx内部监听端口

访问成功