• (dist)vue docker nginx 部署

    菜鸟才学这个，搞了一天，问题贼多。
    资源部署方式 和 node自动加载依赖打包方式（多环境配置）
    一、vue 项目打包
     1.注意配置

    vue.config.js

            assetsDir: 'static',

            publicPath:''
    publicPath 看下下面链接
    vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题_一键写代码的博客-CSDN博客_module.exports publicpath

     2.生成目录

    dist
            index.html
            favicon.icon
            static

                    css

                    js

                    ...

     3.添加Dockerfile和nginx.conf
        在dist同级目录    

    Dockerfile
    nginx.conf
    dist
            index.html
            favicon.icon
            static

                    css

                    js

                    ...

    4、上传服务器 

    二、设置 Dockerfile 和nginx.conf
    1.Dockerfile 

    FROM  xx.xx.xx.xx/bot/nginx:1.18.0

    USER root

    MAINTAINER cai

    COPY dist /usr/share/nginx/html/   注释：nginx默认地址

    COPY nginx.conf /etc/nginx/nginx.conf

    RUN mkdir -p /opt/nginx/logs/dialogue-robot.msxf.lo/

    RUN echo 'echo init ok!!'

    参考

    FROM nginx:1.18.0

    USER root

    RUN mkdir -p /home/data

    COPY dist /home/data/

    WORKDIR /home/data  
    //执行目录改成  /home/data  

     

     

        server {

            listen 9012;

              server_name localhost;

              access_log /opt/nginx/logs/dialogue-robot.msxf.lo/access_log main;

              error_log /opt/nginx/logs/dialogue-robot.msxf.lo/error_log notice;

              add_header Access-Control-Allow-Origin *;

              add_header Access-Control-Allow-Headers X-Requested-With;

              add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

              root  /usr/share/nginx/html/; =》改成  root  /home/data  


    FROM    nginx镜像来源  

            xx.xx.xx.xx/bot/nginx:1.18.0  镜像
            nginx:1.18.0   默认镜像
    USER    用户

                   root 权限最高
    MAINTAINER 维护者
                    菜鸟


    COPY      拷贝命令   unzip -d dist dist.zip(加压到dist目录下)
                    dist /usr/share/nginx/html/  将当前目录 下 dist(必须解压) 拷贝到 /usr/share/nginx/html/
     

    COPY      拷贝命令
                    nginx.conf /etc/nginx/nginx.conf

    拷贝是将服务器当前目标文件或者目录拷贝到docker中的对应目录
    RUN        运行命令
                    mkdir -p /opt/nginx/logs/dialogue-robot.msxf.lo/  创建一个子目录 -p创建子目录保障各个目录都有，不报错
    RUN          运行
                    echo 'echo init ok!!'
                    打印日志

    2.nginx.conf

    worker_processes auto;

    events {

        worker_connections  1024;

    }

    http

    {

            include                         mime.types;

            default_type                    application/octet-stream;

            server_tokens                   off;

            #log_format main                 '$remote_addr - $remote_user [$time_local] '

            #                                                '"$request" $status $bytes_sent '

            #                                                '"$http_referer" "$http_user_agent" '

            #                                                '"$gzip_ratio"';

            log_format  main        '$http_x_forwarded_for | $time_local | $status | $body_bytes_sent | $gzip_ratio | '

                                '$request_method | $scheme | $server_protocol | $server_name | $server_port | '

                                '$request_uri | $request_time | $content_length | $http_referer | $http_user_agent | '

                                '$remote_addr | $remote_port | $remote_user | $http_cookie | $hostname | '

                                '$upstream_status | $upstream_addr | $upstream_http_host | $upstream_response_time';

      #charset                        utf-8;

            server_names_hash_bucket_size   128;

            client_header_buffer_size       32k;

            large_client_header_buffers     4 32k;

            client_max_body_size            300m;

            sendfile                        on;

            underscores_in_headers          on;

            tcp_nopush                      on;

            keepalive_timeout               0;

            tcp_nodelay                     on;

            client_body_buffer_size         512k;

            fastcgi_intercept_errors        on;

            proxy_connect_timeout           90;

            proxy_read_timeout              180;

            proxy_send_timeout              180;

            proxy_buffer_size               256k;

            proxy_buffers                   4 256k;

            proxy_busy_buffers_size         256k;

            proxy_temp_file_write_size      256k;

            proxy_intercept_errors          on;

            server_name_in_redirect         off;

            proxy_hide_header       X-Powered-By;

            gzip                            on;

            gzip_min_length                 100;

            gzip_buffers                    4 16k;

            gzip_http_version               1.0;

            gzip_comp_level                 9;

            gzip_types                      text/plain application/x-javascript text/css application/xml;

            gzip_vary                       on;

            #error_page 400 401 402 403 404 405 408 410 412 413 414 415 500 501 502 503 506 = http://www.msfinance.cn/error2.aspx;

            map $http_upgrade $connection_upgrade {

        default upgrade;

        '' close;

      }

    include domains/*;

    #######default server####

        server {

            listen 9012;

              server_name localhost;

              access_log /opt/nginx/logs/dialogue-robot.msxf.lo/access_log main;

              error_log /opt/nginx/logs/dialogue-robot.msxf.lo/error_log notice;

              add_header Access-Control-Allow-Origin *;

              add_header Access-Control-Allow-Headers X-Requested-With;

              add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

              root  /usr/share/nginx/html/;

              location / {

                try_files $uri $uri/ /index.html;

              }

              location ~.*\.(js|css|jpg|png|jpeg|gif|mp4|svg|woff|ico|tff)$ {

              expires 30d;

            }

            error_page   500 502 503 504  /50x.html;

            location = /50x.html {

                root   html;

            }

        }

    }         

    注:红色标注和Dockerfile一致
     

    三、执行和命令

    将 dist 和dockerfile 和nginx.conf  放入
    /home/test-docker/  （随便目录）

    （1）因为上传dist.zip 所以 unzip -d dist dist.zip(加压到dist目录下)
    （2）使用 命令构建镜像  -t blog--自定义镜像名，记得后面空格加. 表示运行当前目录下的Dockerfile文件
            docker build -t i-robot .         i-robot 镜像名称  i->image     . 表示目录  当前目录
    (3)运行镜像

    --name d-robot表示容器名  --

    -p 9088:9102 端口映射        -p  服务器9088端口映射到 docker里面的9102端口，这两个可以重复

    -d i-robot后台运行i-robot镜像      -d后台运行  i-robot 镜像

    运行镜像： docker run --name d-robot -p 9088:9012 -d i-robot


    docker ps -a   查看所有容器状态  -a所有  去掉正在运行的容器  获取容器id
    docker logs i-robot 
    docker logs id        id是i-robot 镜像id     
    docker images | grep 镜像名  模糊搜索 docker images | grep robot
    docker rm d-robot 删除容器
    docker rmi i-robot删除镜像
    docker stop d-robot 停止d-robot容器
    docker stop id  容易id
    docker exec -it 6627df3f9cfb /bin/bash  以命令方式进入容器(id)
    docker exec -it d-robot /bin/bash 以命令方式进入容器(id)
    exit  安全退出。
    docker save -o ai-police-server.tar 90ed9dc23449  镜像打包给运维

    docker save -o dialogue-police.tar REPOSITORY:TAG 解决镜像文件打包没 名称和tag

    导入镜像：
    docker load -i     ai-police-server.tar

    docker exec -it 4bd6b28379ff /bin/bash                进入镜像文件里面

    cd: COPY dist /usr/share/nginx/html/进入这个目录下面

    md5sum dialogue-police.tar  查看包的md5 查看是否是同一个docker

    通过python环境将资源文件共享

    如果有python环境
    输入 python 查看是否有python 环境  exit()退出
    (1) 在dialogue-police.tar的目录下，mkdir文件 docker_images
    (2) mv dialogue-police.tar  docker_images/  将压缩包移动到 目标文件夹

    (3) cd docker_images
    (4) python -m http.server 9876   在当前目录启动临时服务，将文件资源共享
    (5) ctrl +c 退出

    docker run -it -v /test/config.js:/soft/config.js centos /bin/bash  这是讲 镜像/soft/confg.js 里面的文件映射到   /test/config.js 服务器文件，方便操修改配置文件。

    譬如我要启动一个centos容器，宿主机的/test目录挂载到容器的/soft目录，可通过以下方式指定：

    docker run -it -v /test:/soft centos /bin/bash

    冒号":"前面的目录是宿主机目录，后面的目录是容器内目录

     docker run -it -v /home/testconfig/config.js:/home/testconfig/dist/config.js -p 9087:9013  -d  testconfig

     docker run --name d-base-tools -it -v /home/base_tools/config.js:/home/tools/dist/config.js -p 9014:9013 -d base-tools

    配置搞到外面
    先 docker stop d-testconfig
    直接 docker restaret d-testconfig 

    或者 docker rm d-testconfig  然后  上面命令

    项目配置：实际项目
     

    1. worker_processes auto;
    2. events {
    3.     worker_connections  1024;
    4. }
    5. http 
    6. {
    7.         include                         mime.types;
    8.         default_type                    application/octet-stream;
    9.         server_tokens                   off;
    10.         #log_format main                 '$remote_addr - $remote_user [$time_local] '
    11.         #                                                '"$request" $status $bytes_sent '
    12.         #                                                '"$http_referer" "$http_user_agent" '
    13.         #                                                '"$gzip_ratio"';
    14.         log_format  main     		'$http_x_forwarded_for | $time_local | $status | $body_bytes_sent | $gzip_ratio | '
    15.                          		'$request_method | $scheme | $server_protocol | $server_name | $server_port | '
    16.                         		'$request_uri | $request_time | $content_length | $http_referer | $http_user_agent | '
    17.                          		'$remote_addr | $remote_port | $remote_user | $http_cookie | $hostname | '
    18.                          		'$upstream_status | $upstream_addr | $upstream_http_host | $upstream_response_time';
    19. 	#charset                        utf-8;
    20.         server_names_hash_bucket_size   128;
    21.         client_header_buffer_size       32k;
    22.         large_client_header_buffers     4 32k;
    23.         client_max_body_size            300m;
    24.         sendfile                        on;
    25.         underscores_in_headers          on;
    26.         tcp_nopush                      on;
    27.         keepalive_timeout               0;
    28.         tcp_nodelay                     on;
    29.         client_body_buffer_size         512k;
    30.         fastcgi_intercept_errors        on;
    31.         proxy_connect_timeout           90;
    32.         proxy_read_timeout              180;
    33.         proxy_send_timeout              180;
    34.         proxy_buffer_size               256k;
    35.         proxy_buffers                   4 256k;
    36.         proxy_busy_buffers_size         256k;
    37.         proxy_temp_file_write_size      256k;
    38.         proxy_intercept_errors          on;
    39.         server_name_in_redirect         off;
    40.         proxy_hide_header       X-Powered-By;
    41.  
    42.         gzip                            on;
    43.         gzip_min_length                 100;
    44.         gzip_buffers                    4 16k;
    45.         gzip_http_version               1.0;
    46.         gzip_comp_level                 9;
    47.         gzip_types                      text/plain application/x-javascript text/css application/xml;
    48.         gzip_vary                       on;
    49.         #error_page 400 401 402 403 404 405 408 410 412 413 414 415 500 501 502 503 506 = http://www.msfinance.cn/error2.aspx;
    50.  
    51.         map $http_upgrade $connection_upgrade {
    52. 		default upgrade;
    53. 		'' close;
    54. 	}
    55.  
    56. include domains/*;
    57. #######default server####
    58.  
    59.     server {
    60.  
    61.         listen 9013;
    62.           server_name localhost;
    63.           access_log /opt/nginx/logs/testconfig.msxf.lo/access_log main;
    64.           error_log /opt/nginx/logs/testconfig.msxf.lo/error_log notice;
    65.           add_header Access-Control-Allow-Origin *;
    66.           add_header Access-Control-Allow-Headers X-Requested-With;
    67.           add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    68.           #root  /usr/share/nginx/html/;
    69.  
    70.           location / {
    71.             root /usr/share/nginx/html/;
    72.           }
    73.  
    74.           location /testconfig/ {
    75.             try_files $uri $uri/ /testconfig/index.html;
    76.             alias /home/testconfig/dist/;
    77.             index index.html index.htm;
    78.           #设置某个文件不缓存读取本地，永远走200，拿到最新的
    79.           if ($request_filename ~* config\.(js)$) {
    80.             add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
    81.           }
    82.  
    83.           }
    84.  
    85.         location ^/testconfig/(.*)\.(js|css|jpg|png|jpeg|svg|woff|ico|tff)$ {
    86.             alias   /home/testconfig/dist/;
    87.             expires 30d;
    88.         }
    89.  
    90.  
    91.         error_page   500 502 503 504  /50x.html;
    92.         location = /50x.html {
    93.             root   html;
    94.         }
    95.  
    96.     }
    97. }
    1. FROM  10.99.72.38/bot/nginx:1.18.0
    2. USER root
    3. MAINTAINER luan
    4. RUN mkdir -p /home/testconfig/dist/
    5. #COPY dist /usr/share/nginx/html/
    6. COPY dist /home/testconfig/dist/
    7. COPY nginx.conf /etc/nginx/nginx.conf
    8. RUN mkdir -p /opt/nginx/logs/testconfig.msxf.lo/
    9. RUN echo 'echo init ok!!'

    这个就要注意了

    如果是 location / (根目录：  10.10.10.10:9088/ )   COPY dist /usr/share/nginx/html/  放在这里没问题
    但是如果是 location /h5/  （ 10.10.10.10:9088/h5/ ) 
            RUN mkdir -p /home/testconfig/dist/ 
            COPY dist /home/testconfig/dist/ 那就必须放在新建目录，根目录不行


    随笔写完，希望能用到
    下一篇 node 方式启动项目 使用docker  

  • 相关阅读:
    a标签中rel=“noreferrer noopener“的含义与作用
    USB插座外壳接地的处理和emi，esd考虑
    【软件测试】2022年普通高等学校招生全国统一考试
    @Autowired注解以及失效几个原因
    vue 在线预览PDF
    百度AI给出MFC使用进度条的例子
    深入理解JVM虚拟机第十三篇：详解JVM中的程序计数器
    【MySQL】关于MySQL升级到8.0版本的实践方案
    Vue中v-on的基础用法、参数传递和修饰符
    数据结构刷题：第十一天
  • 原文地址：https://blog.csdn.net/weixin_41127362/article/details/126786411