前端代码部署
前端代码部署的方式有很多,本文主要介绍以下几种:手动部署,docker
镜像部署,gitee + docker
自动部署。
手动部署
1、在我们电脑本地新建文件test-demo\index.html
:
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>hello~我的第一个部署页面</div>
</body>
</html>
2、登录服务器,在服务器下新建目录www
bash
# 登录进去时是在/root目录下,所以我们先切换到根目录
cd ./
# 新建目录www
mkdir www
3、使用Xftp
等工具将test-demo
文件夹上传到服务器的www
目录下。
4、服务器nginx
文件配置。
先来启动nginx
:
nginx
启动后查看下是否有nginx进程:
perl
netstat -anput | grep nginx
可以看到下图: 启动完成后,获取
nginx
配置文件的地址:
nginx -t

先来查看下默认的配置文件
bash
cat /etc/nginx/nginx.conf
配置文件的含义如下:(删除了原有全部的注释)
ini
# worker进程运行的用户和组
user root;
# 指定Nginx的工作进程数,根据硬件和负载情况设置。
worker_processes auto;
# 用来定义全局错误日志文件,通常放在var中,level有 debug,info,notice,warn,error,crit
error_log /var/log/nginx/error.log;
# 指定进程id的存储文件位置
pid /run/nginx.pid;
# 设置包含的其他配置文件,一些加载nginx动态模块相关配置文件
include /usr/share/nginx/modules/*.conf;
# 指定工作模式和以及连接上限
events {
# 单个进程最大连接数(最大连接数=连接数*进程数)
worker_connections 1024;
}
http {
# 日志格式
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;
# 该指令必须在sendfile打开的状态下才会生效,主要是用来提升网络包的传输'效率',防止网络堵塞
tcp_nopush on;
# 该指令必须在keep-alive连接开启的情况下才生效,来提高网络包传输的'实时性',也是为了防止网络堵塞
tcp_nodelay on;
# 设置客户端连接活跃超时,也就是长连接超时时间,单位是秒
keepalive_timeout 65;
# 影响散列表的冲突率。值越大,就会消耗更多的内存,但散列key的冲突率会降低,检索速度就更快。值越小,消耗的内存就越小,但散列key的冲突率可能上升。默认1024
types_hash_max_size 4096;
# 设置文件的mime类型,mime.types是文件扩展名与文件类型映射表
include /etc/nginx/mime.types;
# 默认响应类型,二进制流
default_type application/octet-stream;
# 包含其它配置文件,分开规划解耦
include /etc/nginx/conf.d/*.conf;
# server用来指定虚拟主机,可以指定多个
server {
# 指定虚拟主机监听的端口,默认80,ipv4
listen 80;
# 指定虚拟主机监听的端口,默认80,ipv6
listen [::]:80;
# 指定虚拟主机监听的域名,域名可以有多个,用空格隔开。
# 当开始处理一个http请求时,nginx会取出header中的host,与nginx.conf中的每一个server的server_name进行对比
# 然后根据server的匹配优先级排序(前提是浏览器访问端口与server listen端口一致),以此决定到底由哪一个server块来处理这个请求。
server_name _;
# 指定这个虚拟主机的根目录
root /usr/share/nginx/html;
# xxx
include /etc/nginx/default.d/*.conf;
# 错误页面路由,状态码为时,返回404.html
error_page 404 /404.html;
location = /404.html {
}
# 错误页面路由,状态码为以下几种时,返回50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
}
由上可知,我们想要访问\www\test-demo\index.html
的话,就需要在nginx.conf
加一个server
块,内容如下:
ini
server {
#配置端口
listen 8001;
listen [::]:8001;
#修改为您的域名
server_name x.xxx.xxx.xxx;
root /www/test-demo;
index index.html;
location / {
# 浏览器刷新的时候如果当前路径存在则访问当前路径,不存在则跳转到404
try_files $uri $uri/ =404;
}
}
配置完之后先来验证下我们的配置是否正确:
nginx -t
配置正确后需要重启下nginx
:
nginx -s reload
5、阿里云平台配置安全组开放端口
现在直接访问我们的页面是访问不了的,需要先去阿里云平台配置安全组开放8001端口。

6、访问
然后用我们电脑本地的浏览器打开链接http://x.xxx.xxx.xxx:8001/index.html
,就可以成功的看到我们的页面了。
接下来我们来介绍前端项目部署-docker镜像部署