简书的编辑器有问题，markdown语法识别不行，可以访问原文：xinwei.ltd
这篇文章记录一下我最近写的`NextJs`项目的简单打包、部署以及一些脚本，留作记录以及供大家参考。
最近我写了一个彩票类的小程序：好彩管家(支付宝小程序)/彩号管家(微信小程序)，小程序使用的taro用作跨平台的小程序开发，h5方面为了seo友好，我选择了使用`NextJs`进行改写并丰富功能，使用nextjs开发的体验还是很不错的，毕竟这么多AI公司都选择了NextJs做前端。所以我觉得广大的开发者还是应该去体验一下NextJs，还是很不错的。
话不多说，我来介绍一下我的工程。
一、工程的性能情况介绍
网页是：我的工程地址
从这张图可以看出，我这个工程性能还是可以的，在SEO上基本比较优秀了，当然在渲染上还是有优化的空间，这里不做赘述，大家关注点可以放在如何打包部署上。
二、工程打包
下面是我的NextJs的脚本命令配置。
截图中已经给出了一些解释，我稍微列一下：
dev 脚本命令就是本地开发的
-p 是可选的命令，nextJs默认使用3000端口，使用-p xxx端口号，可以自定义监听的端口号
start 是生产环境下，执行这个命令就可以监听，同样可以使用-p指定端口号
deploy 是我增加的脚本命令，我在工程中写了一个bash脚本，通过npm命令就可以执行这个bash脚本，这个bash脚本就是用来打包，并上传内容到云服务器上，进行docker的相关操作。
三、我的docker-compose文件
我个人比较喜欢使用docker-compose文件来部署项目，因为文件结构清晰，配置一一对应设置就好，我这里留一下我的docker-compose文件内容。
直接在项目根目录下创建这个文件。
```
version: '2.2'
services:
lottery:
image: 'node:latest'
container_name: xxx
working_dir: /app
environment:
- NODE_ENV=production
volumes:
- ./dist:/app
ports:
- 3000:3000 # 根据自己暴露的主机防火墙端口来设置
command: >
sh -c "npm install && NODE_ENV=production npm run start"
```
这个文件比较简单，就指定了一个容器的配置，使用node镜像，然后容器启动时，会执行command脚本中的命令。
四、bash脚本
bash脚本的作用就是用来执行npm相关命令删除旧打包产物、生成新产物，然后通过云服务器的scp授权证书远程ssh访问，操作云服务器文件、文件夹、docker等。
bash脚本内容：
```
#bin/sh
echo "当前路径："
echo ""
pwd
echo "删除旧产物"
rm -rf .next
echo "打包项目，生成新产物"
npm run build
echo "加权限"
chmod 777 .next
# 这是在云服务器厂商管理后台生成的ssh操作授权证书，可以放在本地电脑上，执行命令时带入即可操作云服务器资源
SSH_KEY="/Users/hamry/xxx/ssh_visit.pem"
# 这是主机访问的username和IP，这里不是我的实际IP，你需要改成你自己云服务器的ip地址
SERVER="root@1.2.3.4"
echo "连接服务器&删除旧产物"
ssh -i $SSH_KEY $SERVER '
echo "当前目录：";
pwd;
echo "删除旧产物";
rm -rf /root/lottery_nextjs/dist/*;
rm -rf /root/lottery_nextjs/dist/.[^.]*;
'
echo "拷贝产物到服务器"
echo "拷贝 .next、package、package-lock、public 到服务器"
scp -q -i $SSH_KEY -r .next package.json package-lock.json public $SERVER:/root/lottery_nextjs/dist/
echo "拷贝 docker-compose 到服务器"
scp -q -i $SSH_KEY docker-compose.yml $SERVER:/root/lottery_nextjs/
echo "重启docker"
ssh -i $SSH_KEY $SERVER '
pwd;
cd /root/lottery_nextjs/dist;
pwd;
# docker-compose up # 这里是第一次执行脚本时，会创建docker容器，第二次不用再次执行，不然每次都覆盖生成新容器。
docker restart xxx # 和上面的命令不要同时执行，第一次生成容器时不要执行这个命令，第二次后就可以注释上面的命令，使用这条命令来重启第一次生成的那个容器ID
'
echo "容器重启成功"
```
脚本的相关内容，我都在上面做了解释，大家如果要参考，要仔细阅读清楚，避免执行出错。
另外，这里要说明一下，我们不需要把整个NextJs工程拷贝到云服务器，很占据云服务器空间的，所以我们只需要把重要关键的文件传输到云服务器。关键的文件在上面的脚本中已经有处理，我罗列在这里：
.next文件夹，这个是dev或者build时都会生成的隐藏文件夹，产物都放在这里了
package.json & package-lock.json，这2个文件也必不可少，最终执行命令也要通过npm run start执行package.json中的start命令。
public 文件夹，这里存放的是工程的静态资源文件，也是必不可少的，否则静态资源的访问就会出现404.
这里要说一句为什么没有node_modules文件夹呢，是不是很奇怪，那说明你可能没看懂docker-compose.yml脚本中的那行命令：
```
...
command: >
sh -c "npm install && NODE_ENV=production npm run start"
...
```
这次看清楚了吧，这里有npm install命令，因为是node镜像，然后有package.json，那么在云服务器上安装依赖就很容易。如果要自己上传node_modules文件夹，一个是上传时间会特别久，另一个原因是有可能终端命令行执行由于文件太多导致EOF问题失败。
五、云服务器上的文件内容
5.1 整体文件夹
这里我在云服务器上创建了一个文件夹：lottery_nextjs，我所有的项目都会在云服务器的根路径/root目录下，lottery_nextjs这个文件夹就是我用来部署这个项目的专属文件夹。
这个文件夹下面，放了2个东西：
dist：用于存放nextjs工程的打包产物，bash脚本中上传的内容都是到dist文件夹下；
docker-compose.yml: docker-compose文件，这个是用来创建docker容器，并让docker启动nextJs服务的，内容在上面已经给大家显示出来了。
5.2 dist文件夹
大家看到了吧，上面提到的4个文件/文件夹，就是上传到这里，如果你没看到.next文件夹，因为那是隐藏文件夹，你要点击截图中的红色框部分，可以查看隐藏内容。
这里的node_modules就是通过npm install生成的。
六、图片
另外我展示一下next.config.ts中的图片配置，因为网络图片访问是需要进行域名配置的，在dev环境下访问没有问题，但是生产环境的安全策略必须要配置图片访问域名，如下：
```
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
images: {
remotePatterns: [
{
protocol: 'https', // 协议：http/https
hostname: 'baidu.com', // 域名
port: '', // 端口（无则留空）
},
],
},
output: 'standalone',
};
export default nextConfig;
```
这里建议设置：output: 'standalone',，是优化docker部署的，大家可以试试。
七、其他
大家正常开发完项目后，通过我上述的操作，你可以很快的把nextjs项目部署到自己的服务器上，我这里是为了快速上线，所以怎么快怎么来。如果要更正式点，那么就需要使用工具做一些持续集成了，大家自己可以去摸索一下。
以上。
求关注。
