文章目录

• • • • • 一、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
以此类推…

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

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

二、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

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

三、部署前端项目

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

3.3. 验证

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

附录

index.html

Welcome to nginx!
If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.
For online documentation and support please refer to
nginx.org.

Commercial support is available at
nginx.com.
Thank you for using nginx.

50x.html

An error occurred.
Sorry, the page you are looking for is currently unavailable.

Please try again later.
If you are the system administrator of this resource then you should check
the error log for details.
Faithfully yours, nginx.

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