• docker 部署多个前端vue项目

    文章目录

    一、docker 部署前端项目方案
    1. 方案1

    一个docker容器对应一个前端项目
    使用Dockerfile构建镜像，而镜像内部使用nginx，最后把前端构建好的静态文件放到nginxhtml目录下面就可
    多个前端项目依次创建多个docker容器即可

    2. 方案2

    使用一个docker容器部署多个前端项目
    在构建之前规划好按照不同路径访问前端项目,在配置文件中配置访问路径即可，
    举例：
    项目1 /emos-vue
    项目2 /emos-vue2
    以此类推…

    在这里插入图片描述
    然后，将多个构建后的前端项目静态目录上传到nginx的html文件夹中，前端访问按照规划好的路径访问即可。
    在这里插入图片描述

    这样好处是不用浪费资源，缺点是项目之间还是有耦合度

    二、Nginx配置运行
    2.1. 拉取nginx镜像

    首先下载安装Nginx镜像，这里我依然使用特定版本的镜像。

    docker pull nginx:1.21.3

    • 1
    2.2. 创建配置目录

    在root目录中，创建nginx文件夹。然后把课程git上面“其他”目录中的nginx.conf文件，上传到该目录。并且创建html文件夹，把index.html和50x.html文件上传到该目录。

    具体文件内容：见文章末尾附录

    mkdir /root/nginx/html -p

    • 1

    在这里插入图片描述

    2.3. 创建Nginx容器

    执行下面的命令，创建Nginx容器，然后用浏览器访问云主机的80端口，可以看到Nginx的欢迎画面。

    docker run -it -d --name nginx -m 200m --net=host \
-v /root/nginx/nginx.conf:/etc/nginx/nginx.conf:ro \
-v /root/nginx/html:/usr/share/nginx/html:ro \
-e TZ=Asia/Shanghai \
nginx:1.21.3

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    在这里插入图片描述

    三、部署前端项目
    3.1. 压缩

    把 dist.zip 文件上传到 /root/nginx/html 目录中，然后执行unzip命令解压缩。
    在这里插入图片描述
    在这里插入图片描述

    3.2. 上传
    #进入到html目录
cd /root/nginx/html

#解压缩文件夹
unzip dist.zip

#删除压缩文件
rm -rf dist.zip

#给文件夹改名
mv dist emos-vue

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

    3.3. 验证

    打开浏览器，访问 http://云主机IP:80/emos-vue ，如果能看到登陆页面，说明程序部署成功

    在这里插入图片描述

    附录
    index.html
    <!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    50x.html
    <!DOCTYPE html>
<html>
<head>
<title>Error</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>An error occurred.</h1>
<p>Sorry, the page you are looking for is currently unavailable.<br/>
Please try again later.</p>
<p>If you are the system administrator of this resource then you should check
the error log for details.</p>
<p><em>Faithfully yours, nginx.</em></p>
</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    nginx.conf
    
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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
  • 相关阅读:
    【KAWAKO】从mac上定时将腾讯云的数据备份到本地
    IDEA使用中， 设置平展软件包。使用IDEA遇到的问题：src里为什么创建包为什么不在包里面
    石油数字孪生可视化管理平台，推动石油行业数字化转型与智能化应用
    算据——实现低碳计算的一种路径
    FormMaking V3.6发布，表单设计中业务规则可视化配置上线
    金九银十，23届秋招信息超全汇总表！附各大名企优质岗位内推码！持续更新中···
    Arxiv 2209 | Switchable Self-attention Module
    CP AUTOSAR值Ethernet Test Module(TC8)
    DMA+PWM驱动彩色RGB灯
    【JAVA基础】面向对象基础（下）
  • 原文地址：https://blog.csdn.net/weixin_40816738/article/details/128069460