フロントエンドアプリケーションをNetlifyにデプロイする方法は？

今日、フロントエンドアプリケーションの導入は大きな問題ではありません。 最新のテクノロジーとホスティングプラットフォームを使用して、数分以内にサイトを展開できます。 そこに多くのホスティングプラットフォームがあります。 ただし、この記事ではNetlifyに関心があります。

フロントエンドアプリケーションをNetlifyにデプロイしましょう。

フロントエンドアプリケーション

React、Vue、Angularなど、さまざまな種類のフロントエンドライブラリとフレームワークがあります。幸いなことに、これらはすべて同じパッケージパッケージャーを使用しています。 異なるライブラリとフレームワークで構築されたすべてのフロントエンドアプリケーションの展開は類似しています。 したがって、これらのライブラリとフレームワークのいずれかを使用するのは良いことです。

ライブラリやフレームワークなしでフロントエンドアプリケーションを作成することもできます。 これは、フロントエンドアプリケーションをかつて構築する従来の方法です。 しかし、今は大きく変わります。 したがって、さまざまな方法でフロントエンドアプリケーションを構築できます。 ただし、展開プロセスは、これらのさまざまな種類のフロントエンドアプリケーションすべてで同じです。

ライブラリを使用して構築されたフロントエンドアプリケーションと、ライブラリまたはフレームワークを使用しない別のフロントエンドアプリケーションをデプロイします。 反応し、平野はJavaScriptを使用して展開するためのレッツ・ビルド最小限のフロントエンドアプリケーション。

設定

デプロイメントのデモンストレーション用に、単純なReactおよびJavaScriptアプリケーションを作成します。 従うためにそれらも作成します。 または、すでにフロントエンドアプリケーションを使用している場合は、展開セクションにスキップします。

Netlifyにデプロイするときは、フロントエンドアプリケーションのエントリポイントはindex.htmlである必要があることを覚えておく必要があります。

ライブラリやフレームワークを使用してアプリケーションを作成した場合は、それについて心配する必要はありません。 デフォルトでは、ライブラリとフレームワークはビルドプロセスでindex.htmlファイルを作成します。 ただし、プレーンなJavaScriptアプリケーションがある場合は、アプリケーションのエントリとしてindex.htmlファイルを作成する必要があります。

Reactアプリケーション

次のコマンドを実行して、Reactアプリを作成します。

 npx create-react-app demo

デプロイする前に、必要に応じてアプリを更新できます。 ホームページのテキスト行を更新しました。 しかし、それは問題ではありません:)。

プレーンJavaScriptアプリケーション

以下の手順に従って、簡単なJavaScriptアプリケーションを作成します。

• demoというフォルダを作成します。
• index.html 、 styles.css 、 scriptという3つのファイルを作成します。 js 。
• ここで、 index.htmlはアプリケーションのエントリポイントです。

あなたの創造性を取り出して、アプリを更新してください。 アプリケーションに簡単なものを追加しているだけです。

展開

Netlifyへのフロントエンドアプリケーションの展開に関しては、2つのオプションがあります。 GitHub、GitLab、BitBucketなどからNetlifyにアプリケーションを直接デプロイできます。 または、 Netlify CLI（コマンドラインインターフェイス）を使用してデプロイすることもできます。 アプリケーションをデプロイするためにすべてを知ることは必須ではありません。 ただし、展開のためのさまざまなオプションについては良いことです。

それぞれを1つずつ見ていきましょう。

GitHub

コードをホストするためにGitHubを使用しています。 必須ではないため、使用する必要はありません。 必要に応じて他のプラットフォームを使用できます。

デプロイするアプリケーションには2つのタイプがあります。 しかし、プロセスはどちらも似ています。 両方お見せしますが。 主に2つのステップがあります。 彼らです

• コードをGitHubにプッシュします。
• Netlifyを使用してGitHubからアプリケーションをデプロイします。

最初の部分は、 ReactアプリケーションとJavaScriptアプリケーションの両方に共通です。 最初のステップからデプロイプロセスを開始しましょう。

GitHubにコードがないことを前提としています。 GitHubにコードがある場合は、コードのプッシュ部分をスキップできます。 gitツールが必要です。 マシンにgitインストールされていない場合は、続行する前にインストールする必要があります。

＃1。 コードをGitHubにプッシュする

• GitHubアカウントに移動し、 demoというリポジトリを作成します。

• 作成後、リポジトリは次のように表示されます。

次に、上記で作成したリポジトリにコードをプッシュする必要があります。 コードをプッシュするには、リポジトリまたは以下のコマンドで指定されたコマンドに従うことができます。

• ターミナルまたはcmdを開きます。
• プロジェクトディレクトリに移動します。
• gitinitを使用してgitを初期化しgit init
• ローカルのgitgitaddに変更をgit add .
• メッセージで変更をコミットしますgit commit -m 'Completed application'
• リモートリポジトリをローカルリポジトリgit remote add origin 'your_repo_path'ます。 your_repo_pathをリモートリポジトリに置き換えます。 同様に私の[email protected]:hafeezulkareem/demo.gitのリポジトリで見つけることができます
• ここで、コードgit push -u origin mainプッシュします
• それでおしまい; コードをGitHubにプッシュしました。

リポジトリに次のようなコードが表示されます。

コードをGitHubにプッシュする最初のステップが完了しました。 プレーンなJavaScriptアプリケーションをデプロイする場合、コードは次のようになります。

次のステップに進み、アプリケーションをNetlifyにデプロイしましょう。

＃2。 NetlifyへのGitHubコードのデプロイ

Netlifyにアカウントがない場合は、アカウントを作成してください。

• NetlifyのWebサイトにアクセスします。
• あなたのアカウントにログイン。
• 以下に示すように、Gitから[新しいサイト]というボタンが表示されます。

• ボタンをクリックして展開を開始します。
• 次のようなデプロイページに移動します。

• ページ上でさまざまなコードホスティングプラットフォームを使用できます。 GitHubを使用しています。 だから、それをクリックします。
• 次のように、GitHubアカウントにログインするための新しいウィンドウが開きます。

• Netlify認証のためにGitHubアカウントにログインします。
• GitHubアカウントにログインすると、ウィンドウが閉じて[承認済み]と表示されます。
• 次に、指定された検索バーからリポジトリ名を検索します。

• リポジトリを検索しても、リポジトリにNetlifyへのアクセス権が付与されていないため表示されません。 GitHubに[ Netlifyの構成]というボタンが表示されます。

• ボタンをクリックし、GitHubアカウントのパスワードを入力して、アクセスを確認します。

• 次のようなアクセスページに移動します。

• 下にスクロールすると、リポジトリアクセスというセクションが表示されます。

• 2つのオプションがあります。 すべてのリポジトリまたはそれを必要とする一部のリポジトリへのアクセスを許可できます。 すべてではなく、デプロイしているリポジトリへのアクセスを許可することをお勧めします。
• 次のように、 [リポジトリのみを選択]オプションを選択します。

• 下のドロップダウンをクリックして、デプロイするリポジトリを検索します。 それを選択します。

• [保存]ボタンをクリックします。
• Netlifyのデプロイページにリダイレクトされます。 そして、あなたは新しいリポジトリを見ることができます。

• リポジトリをクリックします。
• デプロイするブランチ、パッケージをインストールするコマンドなど、さまざまな詳細が表示されます。

• マスター以外の別のブランチに完全なコードがある場合は、ドロップダウンからブランチを選択して更新します。
• 最後に、[サイトの展開]ボタンをクリックします。 ダッシュボードにリダイレクトされます。
• サイトの展開には時間がかかります。

• デプロイされると、公開されたサイトが表示されます。

それでおしまい。

Netlifyへのサイトの展開に成功しました。 サイトのURLをクリックすると、ライブで確認できます。

必要に応じてサイトとドメインの設定を更新できます。 ただし、ここでは別の完全なトピックについて説明するため、ここでは取り上げません。 以下は、デプロイ後のプレーンなJavaScriptアプリケーションです。

展開プロセスに違いはありません。 ただし、アプリケーションのエントリポイント、つまりindex.htmlを忘れないでください。

次に、フロントエンドアプリケーションをデプロイする別の方法について学習します。

＃3。 NetlifyCLIを使用したコードのデプロイ

Netlify CLIは、ターミナルまたはコマンドラインからフロントエンドアプリケーションを展開するためのコマンドラインインターフェイスです。 いくつかの余分な手順（上記の方法）を実行したくない場合に便利です。 上記の方法と同様に、 React （任意のライブラリまたはフレームワーク）またはJavaScriptアプリケーションをデプロイできます。

NetlifyCLIの完全なドキュメントはここから入手できます。 ただし、アプリケーションをデプロイする必要はありません。 上級レベルに行くときに参照することができます。

NetlifyCLIを使用してデプロイする方法を見てみましょう。

まず、マシンにインストールする必要があります。 ノードパッケージとして利用できます。 したがって、 npmを使用してインストールできます。 次のコマンドを使用してインストールしましょう。

 npm install netlify-cli -g

フラグ-gは、パッケージをグローバルにインストールして、どこからでもアクセスできるようにすることです。 次の画像のようなものが表示されます。

NetlifyCLIを使用してReactおよびプレーンJavaScriptアプリケーションをデプロイする手順を見てみましょう。

• React（または他のライブラリやフレームワーク）アプリケーションのビルドコマンドを実行します。 プレーンなJavaScriptアプリケーションの場合、コマンドを実行する必要はありません。

 npm run build

• ビルドコマンドは、使用しているライブラリまたはフレームワークによって異なる場合があります。
• 次のようなビルドフォルダが表示されます。

• Reactアプリケーションの場合はbuildフォルダーに、JavaScriptアプリケーションの場合はprojectフォルダーにディレクトリを変更します。

• 次の手順に進む前に、 Netlifyアカウントを作成する必要があります。 Netlifyに移動し、1つのアカウントを作成して、次の手順に進みます。
• 次に、CLIを使用してログインする必要があります。 次のコマンドを実行してログインしましょう。

 netlify login

• 上記のコマンドは、デフォルトのブラウザで新しいタブを開き、Netlifyアカウントにログインします。 Netlifyサイトに移動します。
• クレデンシャルを入力してログインします。ログインした後、CLIを承認するように求められます。

• [承認]をクリックして、自分自身を認証します。 その後に成功メッセージが表示されます。

• 次に、アプリケーションをデプロイします。 次のdeployコマンドを実行します。

 netlify deploy

• 既存のサイトを選択するか、新しいサイトを作成するかを尋ねられます。 （上矢印と下矢印を使用して）新しいサイトの作成と構成を選択し、 Enterキーを押します。

• 次に、選択するチームが表示され、矢印を使用して選択し、 Enterキーを押します。

• これで、サイトのサブドメインを入力できます。 ただし、必須ではありません。 Netlifyは、そのままにしておくとランダムに選択します。 必要に応じて後で変更できます。 今は空白のままにしておきます。

• デプロイするディレクトリを入力するように求められます。 すでに宛先ディレクトリに移動しました。 Enterキーを押してみましょう。 他のディレクトリにも入ることができます。 しかし、それは簡単ではありません。 したがって、最初に宛先ディレクトリに移動してからデプロイすることをお勧めします。

• 次のようにドラフトURLのサイトを展開します。

• ドラフトURLでサイトをチェックして、すべてが正しいことを確認できます。
• サイトを確認した後、次のコマンドを使用して本番環境に展開できます。

 netlify deploy --prod

• ディレクトリのみを要求します。 ディレクトリを入力します。 同じディレクトリにいる場合は、 Enterキーを押してください。
• それでおしまい。 サイトの展開が完了しました。 サイトにアクセスして確認できます。

• そして、これが結果です。

これで、NetlifyCLIを使用してサイトをNetlifyにデプロイできました。 Netlifyダッシュボードでサイトの設定を更新できます。

結論

ふぅ！ 長いものです。 これを完全に読んだ後、フロントエンドアプリケーションをNetlifyにデプロイするために他のガイドは必要ありません。

アプリケーションをNetlifyにデプロイする方法は2つあります。 どちらに従うべきですか？ 最初の方法を使用することにはわずかな利点があります。 Netlifyは、新しいコードをサイトリポジトリにプッシュするたびにビルドを更新します。 ただし、CLIメソッドの場合は、手動で行う必要があります。

状況に応じて、常に1つの方法を他の方法よりも優先します。とにかく、両方の展開方法を知っています。 したがって、方法について心配する必要はありません。 あなたに最適なものを選択してください。

注：記事に示されているデモサイトは、しばらくすると公開されなくなる場合があります。

Netlifyに代わるものが必要ですか？ これらの最高の静的サイトホスティングプラットフォームをチェックしてください。

ハッピーデプロイ