服务器配置
环境部署
部署应用前,为服务器配置好包管理工具,以便节省部署时间。主流的前端包管理工具有 npm、yarn、pnpm、以及国内的镜像 cnpm、tyarn 等,这些包管理器都是基于 nodejs。
包管理安装
通过集成了 npm 的 Node.js 来安装 npm,然后执行 npm i 命令安装其他。
全局安装 yarn 是 npm i yarn -g
,pnpm 是 npm i pnpm -g
。如果不想全局安装,则去除 -g
。
包管理源
包管理源的修改命令类似,将下方的 npm 替换 yarn 或 pnpm 即可修改包管理源。
#查看源
npm config get registry
#更换国内源
npm config set registry https://registry.npmmirror.com/
#换回默认源
npm config set registry https://registry.npmjs.org/
部署包
npm、yarn 和 pnpm 的包安装及管理命令。
#全局安装
npm i 包 -g
yarn global add 包
pnpm add 包 -g
#移除全局包
pnpm remove 包 --global
#更新全局包
pnpm upgrade 包 --global
#升级当前目录的依赖以确保你的项目只包含单个版本的相关包
#本方法能解决大部分的部署报错
npm i && npm update
yarn && yarn upgrade
pnpm i && pnpm up
你也可以安装 npm-check-updates 来检查和更新依赖。
# 全局安装 npm-check-updates
yarn global add npm-check-updates
# package.json 的 scripts 中添加 update 脚本
ncu -u && yarn install
本地测试
有些静态文件不支持直接打开,可以用 anywhere 架构本地服务器来进行测试。
# 安装静态服务 anywhere
npm install anywhere -g
# 进入静态页面存放目录,执行 anywhere
anywhere -p 8081
网站提速并降低带宽费用
缓存设置
网页加载速度不仅受服务器带宽的限制,缓存设置的优化也至关重要。例如,对于频繁访问的网页,如果其静态内容(如图片、JS 和 CSS)的缓存时长过短(如仅一小时),将导致用户每小时都需要重新加载这些资源,从而显著拖慢网页的响应速度。
为了提高访问效率,无论是通过直接服务器设置还是通过云服务配置,适当的缓存策略都是不可或缺的。对于图像文件,如 PNG、JPG 和 GIF,考虑到它们变更频率较低,可以将缓存期设置为长达 365 天。此外,对于通过工具如 webpack 打包的 JS 和 CSS 文件,由于它们的文件名会随内容变更而更新,设置同样长度的缓存期(365 天)是可行的,这样可以确保用户始终加载的是最新的资源。
然而,对于手动编写且频繁更新的 JS 和 CSS 文件,应采取更为谨慎的缓存策略。由于这些文件可能重复使用而未及时更新,建议缩短其缓存期限,以避免因文件未更新而导致的网页显示问题。
压缩设置
一般的网页部署会使用 gzip 或 br。推荐的 gzip 配置如下:
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 4;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\.";
我这将压缩级别从 2 调到 4,越高压缩越多但消耗 CPU 更多。另外,压缩文件类型添加了现代 Web 的常见类型。
服务器 ECS
服务器系统为 Debian 11,配置包管理器 nodejs 和 yarn。[1]
apt-get update # 从数据源更新软件包的列表,运行产生软件包数据库
apt-get install wget && apt-get install sudo # 安装 wget 和 sudo
# 大版本升级必须先建立快照(有次我在 CentOS 上使用本命令后,引发大量依赖错误)
apt-get upgrade # 更新所有软件包(慎用,不要用!)
# 新建用户,非 root 权限
adduser xxx
# 为新用户设置密码
passwd xxx
# 安装 Node.js 20 和 yarn
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt-get install -y nodejs
sudo apt-get install yarn
如果服务器的 Node.js 安装遇到问题,可以用宝塔面板的 Node.js 版本管理器来进行部署。
网站重定向
更改 nginx 配置后,nginx 重载配置后实现网站重定向。$1
表示第一个 ()
内的正则匹配内容,$2
为第二个。[2]
#隐性链接跳转
location /xx1 {proxy_pass <https://xxx.com/;>}
#404 前,将旧文章链接格式转为新的,使用绝对路径
location ^~ /p{
rewrite ^/p/(.*)$ https://newzone.top/posts/$1.html;
}
# huginn 设置中 location 添加 301 定向,兼容老路径链接
if ( $request_uri = "/users/1/web_requests/21/guoke.xml" ) {
rewrite ^ http://xxx.com/users/1/web_requests/19/guoke.xml permanent;
}
#只匹配主页,将主页跳转为其中一个子页面
location = / {
rewrite https://xxx.com/ permanent;
}
全新安装服务器
安装宝塔面板。
删除阿里云主机监控。
service aegis stop #停止服务 chkconfig --del aegis # 删除服务
配置阿里云端口开放,导入安全规则。
宝塔上修改默认账号密码,并修改登录 22 的默认 SSH 端口。如果开通了 FTP,修改 FTP 端口。
选择「网站」>「添加站点」,将站点根目录放在 /www/wwwroot/xxx,同时新建数据库。
上传全站文件并解压,然后按照安装提示重新安装一次,最后导入备份数据库。
404.html 起效,宝塔网站配置文件中,删除
error_page 404 /404.html;
中的#
。SSL 证书设置,开启强制 HTTPS;PHP 版本;301 重定向;添加伪静态设置(metinfo 或其他网站后台有代码)。如果 301 设置失败,直接在「伪静态」配置中,放入跳转代码。
服务器设置参考 NginxConfig 适合新手配置高性能、安全、稳定的 NGINX 服务器的最简单方法。
- 添加计划任务,定期释放内存,建议设置每天释放一次,执行时机为半夜,如:04:00。
- 打开 Linux 工具箱添加 Swap。Swap 推荐与物理内存相同。
- 安装 PHP 缓存扩展,尽量使用更高的 PHP 版本,另外安装 opcache(脚本缓存)、redis(内容缓存)、imagemagick、fileinfo、exif。
- Redis 优化,在/etc/sysctl.conf 中添加
net.core.somaxconn = 2048
,然后终端运行sysctl -p
。
防火墙白名单(自定义),如:添加 url 规则
^/rss.php
到防火墙 URL 白名单,防止 rss 服务被屏蔽。
服务器迁移
- 购买按量付费服务器。
- 用服务器迁移中心 SMC 将旧服务器同步到临时服务器。
- 将域名解析到临时系统,确定服务基本正常。
- 对旧服务器先建立云盘快照,然后更换操作系统,进行全新部署。
- 对比新旧服务器,确认配置正常。
网站设计
网站字体
网站为了提高访问速度并保持设计的一致性,通常会选默认字体。这导致网站设计难以突出重点。针对这点,我通常会修改网站的导航栏字体,将其从默认字体改为 思源黑体 - 粗
。
- 进入 iconfont‑webfont,输入导航栏内所有文字,并设置所需字体。
- 点击「生成字体」后,在选中字体的下方,点击「本地下载」。
- 将字体包上传到服务器,修改新字体的位置参数。
- 在导航栏的
class
属性中添加web-font
。
米拓
早期的动态网站是通过米拓开发的,记录:
- 后台忘记密码,使用 Metinfo 米拓重置工具。
- metinfo 新版静态页会删除 index.html,后续都改用 index.php。
常见问题
CPU 100%
当服务器 CPU 或内存突然飙升 100% 时,依次排除当前运行进程,检查是否安装更新了插件、应用或服务。
如果找不到原因,可以临时设置定期任务。每隔 3 小时重启一次 nginx/apache。有时重启不正常,因此重启命令后 10 秒,再启动一次 nginx/apache。
/etc/init.d/nginx restart
sleep 10s
/etc/init.d/nginx start
CORS 跨域
POST 表单等操作需要涉及第三方 API,需要添加扩域域名,避免 CORS 报错。
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Credentials "true";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
add_header Access-Control-Expose-Headers "Content-Length,Content-Range";