Github は本当に宝庫です。最近、私は
react + nextjsの小さなウェブページを作っていますが、サーバーを更新するたびに行き来する操作は、おもちゃを作る欲望に影響を与えます。ググってみたら、GitHub アクションを使用して自分のサーバーに自動デプロイできることがわかりました。チュートリアルを検索して研究を始めました。最終的な結果は、Vscode でコーディングを完了し、git プラグインを使用して GitHub にプッシュし、GitHub がアクションを自動的にトリガーし、GitHub のクラウドでプロジェクトをパッケージ化してコンパイルし、それをサーバーにアップロードし、元のウェブページの内容を置き換え、PM2 を再起動します。コーディングが完了した後、プッシュするだけで、ウェブページが数分で更新されてデプロイされます！ :@(得意)
【準備作業】サーバーソフトウェアのバージョン#
root@VM-0-4-ubuntu:~# node -v
v16.15.1
root@VM-0-4-ubuntu:~# pm2 -v
5.2.0
開発環境 nextjs
PS F:\ウェブページ（遊び）\ゴミ回収\gabage_recycle> next -v
Next.js v12.2.3
操作を開始する#
ローカルで次のプロジェクトを保存するためのフォルダを作成する#
フォルダに移動して、次のコマンドを実行して、Next.js の公式テンプレートを作成します。
npx create-next-app nextjs-name --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
package.jsonを変更する#
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"export": "next export",
"start": "next start -p 82"
},
"dependencies": {
"next": "latest",
"react": "17.0.2",
"react-dom": "17.0.2"
}
}
プロジェクトが完全に静的なため、
package.jsonファイルにエクスポートコマンドを追加しました。また、ポートを変更しました。サーバー上で他のプロジェクトが既に実行されているため、デフォルトのポートは使用できません。したがって、ポートを 82 に変更しました。自分の空いているポートに変更するか、デフォルトの 80 ポートにすることもできます。（言及する価値があるのは、このプロジェクトを実行するためにサーバーのファイアウォールで事前にポートを許可する必要があります）
ローカルで作成した nextjs プロジェクトを実行する#
package.jsonと同じ階層のディレクトリで次のコマンドを実行します。
npm run dev
http://localhost:3000/にアクセスして、Welcome to Next.js! が表示されれば、サンプルプロジェクトの作成に成功しました。
Vscode でソースコードを開き、GitHub にアップロードする#
プロジェクトフォルダを Vscode のアイコンにドラッグアンドドロップすると、単独のワークスペースとして開かれます。
次に、左側のアイコン「ソース管理」>「GitHub に公開」>「GitHub のプライベートリポジトリに公開」（リポジトリ名を変更することもできます。適当に入力してください。私はプライベートリポジトリに公開しましたが、公開リポジトリに公開することもできます）
最近の新しいバージョンの Git では、ソース管理で正常に表示するためにディレクトリを信頼する必要があるようです。そうしないと、初期化されていない画面でスタックし続けます。今日、この問題に遭遇し、調べて初めて Git がディレクトリの信頼を設定する必要があることを知りました。
git config --global --add safe.directory F:/next/nextjs-name
コマンド内のディレクトリを作成した nextjs プロジェクトのディレクトリに置き換え、コマンドを実行してから Vscode を再起動してリポジトリを公開します。
パッケージ化してサーバーに手動でデプロイする#
未完了。