nextjs项目的打包、docker部署、脚本等

这篇文章记录一下我最近写的NextJs项目的简单打包、部署以及一些脚本，留作记录以及供大家参考。

最近我写了一个彩票类的小程序：好彩管家(支付宝小程序)/彩号管家(微信小程序)，小程序使用的taro用作跨平台的小程序开发，h5方面为了seo友好，我选择了使用NextJs进行改写并丰富功能，使用nextjs开发的体验还是很不错的，毕竟这么多AI公司都选择了NextJs做前端。所以我觉得广大的开发者还是应该去体验一下NextJs，还是很不错的。

话不多说，我来介绍一下我的工程。

一、工程的性能情况介绍

网页是：https://lottery.xinwei.ltd

从这张图可以看出，我这个工程性能还是可以的，在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: 'www.baidu.com', // 域名
        port: '', // 端口（无则留空）
      },
    ],
  },
  output: 'standalone',
};

export default nextConfig;

这里建议设置：output: 'standalone',，是优化docker部署的，大家可以试试。

七、其他

大家正常开发完项目后，通过我上述的操作，你可以很快的把nextjs项目部署到自己的服务器上，我这里是为了快速上线，所以怎么快怎么来。如果要更正式点，那么就需要使用工具做一些持续集成了，大家自己可以去摸索一下。

以上。

求关注。