文章目录

  • 一、docker 部署前端项目方案
  • 1. 方案1
  • 2. 方案2
  • 二、Nginx配置运行
  • 2.1. 拉取nginx镜像
  • 2.2. 创建配置目录
  • 2.3. 创建Nginx容器
  • 三、部署前端项目
  • 3.1. 压缩
  • 3.2. 上传
  • 3.3. 验证
  • 附录
  • index.html
  • 50x.html
  • nginx.conf


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

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

2. 方案2

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

Dockerfile部署go docker dockerfile部署多个前端项目_html


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

Dockerfile部署go docker dockerfile部署多个前端项目_vue.js_02

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

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

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

docker pull nginx:1.21.3
2.2. 创建配置目录

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

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

mkdir /root/nginx/html -p

Dockerfile部署go docker dockerfile部署多个前端项目_html_03

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

Dockerfile部署go docker dockerfile部署多个前端项目_vue.js_04

Dockerfile部署go docker dockerfile部署多个前端项目_html_05

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

把 dist.zip 文件上传到 /root/nginx/html 目录中，然后执行unzip命令解压缩。

Dockerfile部署go docker dockerfile部署多个前端项目_vue.js_06


Dockerfile部署go docker dockerfile部署多个前端项目_nginx_07

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

#解压缩文件夹
unzip dist.zip

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

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

Dockerfile部署go docker dockerfile部署多个前端项目_nginx_08

3.3. 验证

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

Dockerfile部署go docker dockerfile部署多个前端项目_html_09

附录
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>
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>
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;
}