• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
IT联盟之家-ithome8
博客园    首页    新随笔    联系   管理    订阅  订阅
vue项目发布到docker nginx的方法总结

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

一、通过制作镜像,使用镜像生成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

docker stop de3bd9fcb694

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

docker rm de3bd9fcb694

  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

docker start shoppc

  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)

 

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

 

posted on 2022-09-07 15:03  IT之家  阅读(456)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3