惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
MyScale Blog
MyScale Blog
博客园 - Franky
The Cloudflare Blog
IT之家
IT之家
Blog — PlanetScale
Blog — PlanetScale
博客园 - 聂微东
WordPress大学
WordPress大学
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
T
The Blog of Author Tim Ferriss
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
Google DeepMind News
Google DeepMind News
P
Proofpoint News Feed
Martin Fowler
Martin Fowler
aimingoo的专栏
aimingoo的专栏
J
Java Code Geeks
腾讯CDC
雷峰网
雷峰网
Microsoft Azure Blog
Microsoft Azure Blog
G
Google Developers Blog
博客园 - 【当耐特】
美团技术团队
云风的 BLOG
云风的 BLOG

博客园 - IT之家

关于antd前端组件a-select组件选择无效的问题处理记录 antd前端页面实现浏览器中PDF文件预览(不使用第三方插件 ) swagger文档生成html静态文档 根据Word模板导出word文档,包含文本标签替换为图片,生成列表数据,以及标签替换等功能 asp.net core中webapi接口的动作与参数 .NETCore文件上传将文件保存到docker容器以外的文件夹 liunx服务器通过ssh实现异地备份 mysql常见错误 liunx下自动备份文件夹 mysql在liunx下面的自动备份 关于.net6.0中swagger偶尔无法加载接口的问题笔记 VUE对象数组,和普通数组的常用方法 关于VUE项目请示接口报错:Error: Network Error at createError (createError.js:17) at XMLHttpRequest.handleError的问题处理 解决.net6 Docker容器 DateTime.Now 获取时间相差8小时问题(转载) CronExpression使用笔记 VUE项目开发报错:Error in render: "TypeError: Cannot read property 'country' of undefined" vs2022升级后打开项目报错预定义类型system.void未定义或导入” 关于.net6项目发布到docker(nginx)踩到的一些坑 关于.netcore6图片处理(生成缩略图、验证码、加水印)发布到docker(liunx)踩到的坑
vue项目发布到docker nginx的方法总结
IT之家 · 2022-09-07 · via 博客园 - IT之家

我总结了以下两种方法可用

一、通过制作镜像,使用镜像生成docker   这个是比较常用的方法,制作镜像(images)后,如果还要生成docker可以直接使用镜像比较方便以下是操作步骤

  1.创建目录 分别对应网站文件目录,日志目录,和配置文件目录

mkdir -p /home/OnlineBusiness/nginx_admin_docker/www /home/OnlineBusiness/nginx_admin_docker/logs /home/OnlineBusiness/nginx_admin_docker/conf.d 

  2.使用npm run build发布vue项目,并且上传到创建的文件目录,并且修改好nginx的配置文件conf.d目录下面的default.conf并且上传到conf.d目录,每个人的配置可能都不一样,以下是我的配置文件

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    location / {
       root   /usr/share/nginx/html;
       index  index.html index.htm;
       client_max_body_size 200m;
       if (!-e $request_filename) {
           rewrite ^/(.*) /index.html last;
           break;
       }     
        # To allow POST on static pages
        error_page 404 /index.html;
        error_page  405     =200 $uri;
       # error_page  405 200 $uri;
    }

    location ~ /api/  {
        proxy_set_header Host $http_host;                 
        proxy_set_header X-Real-Ip $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        
        rewrite  ^/api/(.*)$ /$1 break;  
        proxy_pass http://172.16.19.155:8004;   
    }
    location ~ /admin/  {
        proxy_set_header Host $http_host;                 
        proxy_set_header X-Real-Ip $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        
        rewrite  ^/(.*)$ /$1 break;  
        proxy_pass http://172.16.19.155:8030;   
    }
     location ~ /WebApi/  {
        proxy_set_header Host $http_host;                 
        proxy_set_header X-Real-Ip $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        
        rewrite  ^/(.*)$ /$1 break;  
        proxy_pass http://172.16.19.155:8030;   
    }  
    #access_log  /var/log/nginx/host.access.log  main;
}

View Code

  3.编写dockerfile文件,说明:第一行:指定nginx的镜像来源,第二行:指定作者,第三行:删除默认的配置文件,第四行 添加本地的配置文件,第五行 复制项目文件到nginx目录
dockerfile文件不能带扩展名,放在根目录里面(我这里就是放在/home/OnlineBusiness目录下面)

FROM nginx
  
MAINTAINER rxyhj
RUN rm /etc/nginx/conf.d/default.conf   
ADD conf.d/default.conf /etc/nginx/conf.d/  
COPY www/ /usr/share/nginx/html/

  4.创建镜像文件,在命令行下面,切换到dockerfile所在的文件夹,使用以下命令创建镜像文件,后面的.不能忘记,表示dockerfile文件夹在当前目录

docker build -t 镜像名称:版本号 .

  5. 使用镜像文件创建并启动容器,其中8002是本机使用的端口号,80是容器的端口,执行完命令后可使用本地IP加端口号访问

docker run --name=容器名称 -p 8002:80 -d 镜像名称:版本号 .

二、通过命令行的方法发布,该方法稍微麻烦一点,如果只发布一次可以使用该方法,操作步骤如下

  1.新建一个默认的nginxdocker,其中nginx是本地已有的nginx文件,如果没有要先创建

docker run -id --name --restart=always -e TZ=Asia/Shanghai -d nginx -p 80:80 nginx

  2.创建目录 分别对应网站文件目录,日志目录,和配置文件目录

mkdir -p /home/OnlineBusiness/nginx_admin_docker/www /home/OnlineBusiness/nginx_admin_docker/logs /home/OnlineBusiness/nginx_admin_docker/conf.d /home/OnlineBusiness/nginx_admin_docker/conf

View Code

  3.复制默认nginx默认配置文件到配置文件目录,其中 de3bd9fcb694 是默认nginxdocker的容器Id,可以通过dokcer ps查看

docker cp de3bd9fcb694:/etc/nginx/nginx.conf /home/OnlineBusiness/nginx_test/conf
docker cp de3bd9fcb694:/etc/nginx/conf.d /home/OnlineBusiness/nginx_test/

  4.停止默认配置nginx docker 其中 de3bd9fcb694 是默认nginxdocker的容器Id

  5.删除默认配置 其中 de3bd9fcb694 是默认nginxdocker的容器Id

  6.将发布后的vue项目上传到创建的网站文件目录,修改配置文件,如果有默认的配置文件,前面1,3,4,5步可以不需要,直接将配置文件复制到配置文件夹中即可
  7.重新创建容器,并且指定容器的文件目录,日志目录、配置文件目录与本地的目录映射,映射后如果修改了本地对应目录的文件,重启容器后会同步过去

docker run -d -p 8200:80 --name shoppc --restart=always -e TZ=Asia/Shanghai -d -v /home/OnlineBusiness/nginx_admin_docker/www:/usr/share/nginx/html -v /home/OnlineBusiness/nginx_admin_docker/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/OnlineBusiness/nginx_admin_docker/conf.d:/etc/nginx/conf.d -v /home/OnlineBusiness/nginx_admin_docker/logs:/var/log/nginx nginx

  8.启动容器  shoppc为容器名称,也可以使用Id

  9.修改nginx映射配置 -it参数表示分配一个伪终端 shoppc为容器名称 /bin/bash表示对容器执行bash操作,也可以在本地目录修改配置文件,然后重启容器也可以生效

    1). docker exec -it shoppc /bin/bash // 进入容器内部
    2). vim /etc/nginx/conf.d/default.conf // 修改nginx配置文件(如果vim命令不可用则需要安装执行以下命令安装 apt-get update (更新安装包源,否则可能无法运行vim的安装语句),apt-get install vim 安装vim)

以上方法和步骤都经过亲自动手实践是可以走得通的,在此记录下来,以免以后不记得了