文章目录
- 一、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
<!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;
}
