基于docker与nginx部署前端web项目
首先准备一台服务器(腾讯云或者阿里云等等)
环境部署与准备
1.安装liunx系统, 一般可以选择CentOS或者Ubuntu 购买时自选即可,会自动安装选择的系统, 下面介绍将由阿里云服务器举例
2.安装docker环境与docker-compose命令
关于docker的介绍可以参考阮一峰大大的文档
2.1 docker安装可以参照官网的参照谷歌搜索的方法安装, 也可以选择系统的时候安装自带docker运行环境的系统
// 安装docker-compose 要安装其他版本的Compose,可以将1.24.1替换为要安装的Compose版本
sudo curl -L https://github.com/docker/compose/releases/download/1.24.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
// 添加运行权限
sudo chmod +x /usr/local/bin/docker-compose
// 查看docker-compose版本
docker-compose --version
3. 打包前端项目,这边以vite创建的项目为例, 运行yarn build即可生成默认打包文件dist文件夹
4. 创建docker-compose.yaml文件,此文件是docker-compose的配制文件, 关于配置详解可以参考文档
version: '2.0'
services:
website:
# 用来指定一个包含Dockerfile文件的路径。一般是当前目录. 。Fig将build并生成一个随机命名的镜像
build: .
# 镜像
image: wkqb-web:0.0.1
# 容器名称
container_name: wkqb-web
# 指定与部署和运行服务相关的配置(restart: always关机或者重启docker同时重启容器)
restart: always
# 挂载目录
volumes:
- ./dist:/wkqb-web/dist
- ./nginxconf:/etc/nginx/conf.d
# 添加环境变量
environment:
BACKENDURL: "http://39.108.82.140:7001"
# 映射端口 将1307端口映射到主机80端口
ports:
- "1307:80"
# 覆盖容器启动后默认执行的命令
command: "/bin/bash -c \"envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'\""
5.创建文件nginxconf并且在该文件夹中创建default.conf.template文件,此文件为nginx配置, 更多配置大家可以自行百度
server {
listen 80;
server_name localhost;
# gzip 压缩,能提高加载速度,但会损耗一定的 cpu,对于访问量大的站点应当关闭,改为编译时压缩
gzip on;
gzip_min_length 1k;
gzip_buffers 4 8k;
gzip_http_version 1.1;
gzip_comp_level 5;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
#charset koi8-r;
access_log /var/log/nginx/wkqb.access.log main;
error_log /var/log/nginx/wkqb.error.log warn;
# 根路径响应 app.html
location / {
root /wkqb-web/dist/;
index index.html;
}
# 代理
location /api {
proxy_pass ${BACKENDURL};
}
}
创建文件Dockerfile, Dockerfile是一个包含用于组合映像的命令的文本文档。可以使用在命令行中调用任何命令。 Docker通过读取Dockerfile
中的指令自动生成映像。更多配置详情可参考文档
# docker环境请使用这个包,以 nginx + 静态文件 方式部署
# FROM:指定基础镜像,必须为第一个命令
FROM nginx:1.17.5
# WORKDIR:工作目录,类似于cd命令
WORKDIR /wkqb-web
6. 登陆云服务器, 将web项目中 dist 文件夹 nginxconf文件夹已经docker-compose.yaml Dockerfile文件添加到压缩包(也可以不压缩)
7. 创建一个文件夹用来存放该压缩包(命名最好为web项目名称)
mkdir wkqb-web // 创建文件夹
8. 将文件导入到上面创建的文件夹中
导入方式有多种,可以使用WinSCP xftp 6工具等, rz命令等等
// rz命令安装
// rz:从本地上传文件至服务器
//sz filename:从服务器下载文件至本地
yum install lrzsz // centOS
sudo apt-get install lrzsz // Ubuntu
// 进入文件夹
cd wkqb-web/
// 文件上传
rz -b
// 文件解压
unzip wkqb-web.zip
使用docker-compose up -d 该命令可以自动完成包括构建镜像,(重新)创建服务,启动服务,并关联服务相关容器的一系列操作。
最好输入服务器http://${服务器ip}:1307 即可访问
项目迭代与更新
编码结束后重新打包代码,替换服务器中web代码文件
// 查看 docker 容器
docker ps
// 停止某个docker容器
docker stop ${CONTAINER ID}
// 重新运行容器
docker-compose up -d