あなたのノードのためにPM 2を使っているCI/CDへの方法.JSプロジェクト


なぜ?


ノードがあります.あなたのローカルマシンのJSプロジェクトは、リモートサーバーにそれを展開する方法を知らないか、またはあなたのコンピュータからリモートサーバーにFTPを使用してコンテンツをコピーすることによって昔ながらの方法を使用する?
さて、あなたはこのプロセスを自動化することができて、あなたの人生をPM 2 *を使うことをより簡単にします

何?


PM 2はノードのプロセスマネージャです.jsこれは、WindowsのタスクマネージャとMacOSのアクティビティモニタのようです.
を含めることができます-しかし、限られていない-あなたのアプリケーションを管理し、スケールを開始し、停止します.しかし、我々が望む最も重要な特徴は、展開しています.
この投稿では、アプリケーションをリモートサーバーに配備し、単一のコンソールコマンドで実行/ビルドする方法を学びます.

どうやって?


ステップ1 :プロジェクトを作成する


まず、我々は明らかにプロジェクトが必要です.
フォルダとCDを作成します.
mkdir pm2-deploy; cd pm2-deploy
次に、ノードプロジェクトとしてフォルダーを初期化します.
npm init -y
その後、先に行くことができますし、インストールexpress ノード環境で静的ファイルを提供する.
npm i express
そして、フォルダに役立つコードを書くJSファイルを作成する必要がありますpublic 我々はまた、作成する必要があります.
創作したindex.js を返します.あなたがそれを変更する必要があることを忘れないでくださいmain フィールドpackage.json ファイルも.
また、パブリックフォルダで提供するHTMLファイルが必要です.
ファイル構造は次のようになります.

これが私のインデックスです.js
< div >
Expressは静的なフォルダを提供しますpublic ポート3000の内容ここでは何も気にしないp >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/T410/351b594bdd6f61f1ba84fa05c9f78fee.js//>
< div >
< p >index.html 私たちは特別なことをしませんbr/>
<> P >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/T410/38599f88d279a302bc9eb68cc07a4a40.js//>
< div >
< br/> < br/>を使用します.
<> P >
クラスをハイライト表示する
npm start
< div >
私たちはコンソールを見るべきです.ログ出力はPM2 Project is now live @ localhost:3000 .


< tt >そのポートに行くことによって動作しているか確認できます.移動するlocalhost:3000 ブラウザで見ればYAY! <山田>p >

ステップ2:グローバルにPM 2をインストールする


< em > PM 2 NPMパッケージをグローバルにインストールする必要があります.< br/>を使ってインストールできます
<> P >
クラスをハイライト表示する
npm i -g pm2
< div >
<高橋>p >

ステップ3 : Gitの初期化


私たちはバージョン管理システムのないCI/CDを持つことができません.Gitサービスにプロジェクトをプッシュする必要があります.そのためにgithubを使います.p >
< tt > git - repoを作成する際には、既存のプロジェクトをプッシュする方法について説明します.br/>
しかし、ここでは必要なコマンドです
<> P >
クラスをハイライト表示する
git init
git remote add origin [email protected]:<your_github_username>/<your_repository_name>.git
git add .
git commit -m "Initial Commit"
git branch -M main
git push -u origin main
< div >

Note: I strongly recommend using SSH Connection instead of using HTTPS for Github. Your life will get better and securerer :)


ステップ4 :リモートマシンの設定


このステップでは、仮想リモートマシンを作成/予約する方法の詳細には触れませんが、EC 2 ( AWS )マシン上でUbuntuを使っていることを覚えておいてください.p >
まず、リモートマシンに接続する必要があります.
< P >ssh -i path_to_key_file remote_username@remote_ip


< htmlurl : NVM , NPMのインストールをしてしまったと仮定します.https://github.com/nvm-sh/nvm#installing-and-updating


ここで重要なことは一つです.NVMによって追加された行を私たちに移動させる必要があります.bashrcファイルを先頭にします.お使いのシステムを使用することがあります.バッヘンプロフィールまたは何か他.NVMインストールの出力に注意してください.p >
これらは、我々が動く必要がある線です.お気に入りのエディタを開き、ファイルの先頭に移動しますbr/>
<> P >
クラスをハイライト表示する
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
< div >
< tt >ファイルを保存して終了した後、ステップ2でもPM 2をインストールできますbr/>
<> P >
< P >npm i -g pm2

<> P >
インストール後< br/>
<> P >
< P >pm2 startup

<> P >
< p >は、あなたのリモートシステムを再起動するたびに、自動的にPM 2を起動させる方法について、あなたに簡単な指示を与えます.私は、それをすることを強く勧めますp >
<高橋潤子>p >
リモートマシンでは先に進むことができます.
<> P >
クラスをハイライト表示する
ssh-keygen -t ed25519 -C "<your_github_email>"
< div >

Further reading on how to create ssh key https://docs.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent


keygenはキーの名前を尋ねます.もしあなたがそれを変更したいなら< em >< em/>をしないよう強くお願いします.p >
< tt >パスワードを要求したときには、Enterキーを押すだけです.p >
キーを作成した後、公開鍵の内容をコピーする必要がありますbr/>
<> P >
クラスをハイライト表示する
cat /home/ubuntu/.ssh/id_ed25519.pub
< div >
< p >先に進んで、あなたが始めるテキストをコピーしてくださいssh- そして、あなたの電子メール(含まれる)で終わることp >
それから、行きなさいhttps://github.com/settings/keys Githubにログインしている間、クリックしてくださいNew SSH Key ボタン.コピーしたテキストをキーフィールドに貼り付けます.p >
私たちは、私たちのgithubに接続するために、我々のリモートマシンに認可を与えました.しかし、私たちは、リモートマシンで信頼された接続をマークするために、一度だけ< em/emに接続する必要があります.そのためには、リポジトリをリモートマシンにクローン化できますbr/>
<> P >
クラスをハイライト表示する
git clone [email protected]:T410/pm2-deploy.git
< div >
<高橋>br/>
接続を継続したいなら、コンソールはあなたに尋ねます.種類yes 終了ヒットp >

Note: We cloned the repo into the user folder. /home/ubuntu for me. Now the full project path is /home/ubuntu/pm2-deploy. We will use this path to update the ecosystem.config.js file in the next step.


そして今、リモート接続をサーバにクローズするのが良いです.p >

ステップ5:エコシステムの設定。設定。jsファイル


私たちはリモートサーバーをアップ&amp;実行し、すでにプロジェクトを我々のリポジトリにプッシュして、適切に設定する必要がありますecosystem.config.js 私たちのプロジェクトがどこにあるのかPM 2を教えてください.p >
< file >以下のようになります.
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/T410/5e20e39159bea8c15df78078fc030b7c.js//>
< div >
< tt >エクスポートしている2つのセクションがあります.
<ウル>
  • アプリ
  • 配備する
  • < ull >
    < p >name フィールドapps セクションは、PM 2プロセスリストに表示されるプロジェクトの名前です.p >
    < p >script フィールドは、プロジェクトをリモートサーバーに配備するときにPM 2が実行されるスクリプトです.この場合、それはmain フィールドpackage.json ファイルを開くp >
    残りのフィールドはかなり自明です.p >
    <ウル>
  • user SSHを使用してリモートサーバーに接続するユーザー名です
  • host リモートサーバのIPアドレスですか
  • path どこで、あなたのプロジェクトをあなたのリモート・サーバーで配備したいですか?我々がすでに我々のリモートサーバにrepoをクローンしたのを思い出してください.我々は先に行くことができ、ここでそのパスを書くことができます
  • repo リポジトリURLは以下のような形式ですgit:github.com:/user/repo.git
  • ref はリファレンスブランチです.リモートサーバがプルするどのブランチ
  • key SSHを使ってマシンを接続するキーのローカルパスです
  • "post-deploy" は、リモートマシンでgithubからレポを引いた後に実行されるコマンドを受け取ります
  • < ull >

    ステップ6 :配備


    < p >マシンとPM 2を設定しました.プロジェクトをリモートマシンに配備することができますp >
    展開する前に、変更をコミットしてプッシュする必要があります.その後、最初のランでは、プロジェクトを設定する必要があるPM 2を教えてください.br/>
    <> P >
    クラスをハイライト表示する
    pm2 deploy ecosystem.config.js production setup
    
    < div >
    < em >このコマンドで、リモートコマンドに接続します.プロジェクトを展開できますbr/>
    <> P >
    クラスをハイライト表示する
    pm2 deploy ecosystem.config.js production
    
    < div >
    < P >

    そうだ!p >
    現在、あなたはあなた自身に尋ねていますbr/>
    さて、我々はNGinxのようなサーバーを設定していないが、プロジェクトが動作しているかどうかテストすることができますcurl . もちろん、リモートマシンに接続する必要があります.br/>
    <> P >
    クラスをハイライト表示する
    curl http://localhost:3000
    
    < div >
    インデックスを参照してください.画面上のHTML出力素晴らしいニュースです!あなたはそれをしました!p >
    また、このコマンドを実行しているアプリケーションPM 2をリストすることもできます
    <> P >
    クラスをハイライト表示する
    pm2 ls
    
    < div >

    結論


    我々はここで大きな進歩を遂げた.プロジェクトを一つのコマンドで展開する方法を学びました.p >
    < tt >サンプルrepo :< br/>
    <> P >
    < div class ="ltag github readmeタグ"
    < div class ="readme概要"

    T 410 / PM 2展開



    < div >
    < div class ="ltag github本体"
    < div class ="md "データパス="README . md "> < articleクラス="Markdown Body Entry Content Container LG "itemProp = "text "

    説明


    <高橋潤子>ecosystem.config.js このチュートリアルのために作られるPM 2のためのファイル
    <> P >
    <山田>
    < div >
    < div class ="GH BTNコンテナ"View on GitHub < div >
    私はNGINXをインストールして、我々が我々のプロジェクトのために使っているポートを提供する方法をあなたに教えなかったということを知っています、しかし、私は近い将来それを確実にして、ここで更新しますp >
    何か問題があればコメント欄で何が間違っているか教えてください.p >