DigitalOcean App Platform に React アプリケーションをデプロイする方法

チュートリアル
JavaScript React

著者は、プログラムの一環として寄付を受け取る組織としてCreative Commonsを選択しました。

注意: このチュートリアルでは、ReactとApp Platformを使用して静的アセットとサイトを展開する方法を示します。Reactアプリケーションを動的なバックエンドコードと共に展開したい場合は、公式ドキュメントのApp Platform Reactのサンプルをチェックしてください。

はじめに

DigitalOceanのApp Platformは、ソースリポジトリからアプリケーションを構成して展開することができるPlatform as a Service (PaaS)製品です。アプリを構成した後、DigitalOceanはすべての変更でアプリケーションをビルドして展開します。これにより、最小限の構成で完全なWebサーバーと展開パイプラインの利点を得ることができます。これは、Reactアプリケーションを展開するための迅速かつ効率的な方法であり、バックエンドのないサイトを構築するためにReactを使用している場合は、App Platformの無料ティアを利用できます。

このチュートリアルでは、無料のStarterティアを使用して、ReactアプリケーションをDigitalOcean App Platformにデプロイします。 Create React Appを使用してアプリケーションを構築し、コードをGitHubリポジトリにプッシュし、その後、アプリケーションをDigitalOceanアプリとして構成します。 アプリをソースコードに接続し、プロジェクトを一連の静的ファイルとしてデプロイします。

このチュートリアルの最後までに、Reactアプリケーションを構成して、GitHubリポジトリのmainブランチにプッシュするたびに自動的にデプロイできるようになります。

前提条件

ステップ1 — Reactプロジェクトの作成

このステップでは、Create React Appを使用してReactアプリケーションを作成し、デプロイ可能なバージョンを構築します。

始めるには、ローカルマシンで Create React App を使用して新しいアプリケーションを作成します。ターミナルで、以下のコマンドを実行して digital-ocean-app という名前のアプリケーションをビルドします：

  1. npx create-react-app digital-ocean-app

npx コマンドは、マシンにダウンロードせずに Node パッケージを実行します。 create-react-app スクリプトは、すべての依存関係をインストールし、digital-ocean-app ディレクトリにベースプロジェクトを構築します。Create React App の詳細については、チュートリアル How To Set Up a React Project with Create React App をご覧ください。

コードは依存関係をダウンロードし、ベースプロジェクトを作成します。完了までに数分かかる場合があります。完了したら、成功メッセージが表示されます。 yarn を npm の代わりに使用する場合、バージョンは若干異なる場合があります：

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-app
  npm start

Happy hacking!

ベースプロジェクトができたので、ローカルで実行してプロジェクトがサーバー上でどのように表示されるかをテストします。まず、ディレクトリに移動します：

  1. cd digital-ocean-app

次に、npm start スクリプトを使用してプロジェクトを実行します：

  1. npm start

コマンドを実行すると、ローカル開発サーバーの URL が表示されます：

Output
Compiled successfully!

You can now view digital-ocean-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

ブラウザを開いて http://localhost:3000 に移動すると、プロジェクトが表示されます：

プロジェクトを停止するには、ターミナルで CTRL+C または ⌘+C を入力します。

Reactアプリケーションが機能しているので、コードをGitHubリポジトリにプッシュできます。

ステップ2 — GitHubへのコードのプッシュ

アプリをデプロイするために、App Platformはホストされたコードリポジトリからソースコードを取得します。このステップでは、ReactアプリのコードをGitHubリポジトリにプッシュし、後でApp Platformがアクセスできるようにします。

GitHubアカウントにログインします。ログインしたら、新しいリポジトリを作成し、digital-ocean-appという名前を付けます。リポジトリをプライベートまたはパブリックのいずれかに設定できます：

Create React Appは自動的にプロジェクトをgitで初期化するので、コードを直接GitHubにプッシュする準備ができています。まず、次のコマンドで使用するリポジトリを追加します：

  1. git remote add origin https://github.com/your_name/digital-ocean-app.git

次に、次のようにmainブランチにプッシュすることを宣言します：

  1. git branch -M main

最後に、コードをリポジトリにプッシュします：

  1. git push -u origin main

コードをプッシュする際に、GitHubの資格情報を入力してください。

コードをプッシュすると、成功メッセージが表示されます。メッセージは少し異なりますが、以下のようになります：

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

これで、コードがGitHubリポジトリにコピーされました。

このステップでは、プロジェクトをGitHubにプッシュして、DigitalOcean Appsを使用してアクセスできるようにします。次に、プロジェクトを使用して新しいDigitalOcean Appを作成し、自動デプロイメントを設定します。

ステップ3 — DigitalOcean App Platformへの展開

このステップでは、ReactアプリケーションをDigitalOcean App Platformに展開します。GitHubリポジトリをDigitalOceanに接続し、プロジェクトをビルドするように構成し、初期プロジェクトをビルドします。プロジェクトが公開されると、変更ごとに新しいビルドがトリガーされ、更新されます。

このステップの最後までに、DigitalOceanで継続的なデリバリーを備えたアプリケーションを展開できるようになります。

まず、DigitalOceanアカウントにログインして、Createボタンを押し、次にAppsを選択します：

次に、GitHubリポジトリをリンクするように求められます。まだ接続していない場合は、ユーザー名とパスワードでログインし、DigitalOceanにリポジトリへのアクセスを許可する必要があります：

アカウントをリンクしたら、GitHubの認証画面で接続したいリポジトリを選択します。この場合、digital-ocean-appリポジトリを使用していますが、必要に応じて複数のリポジトリを接続できます。

リポジトリを選択した後、DigitalOcean インターフェースに再接続します。リポジトリのリストから digital-ocean-app を選択し、次へ を押します。これにより、アプリがGitHubリポジトリに直接接続されます：

リポジトリを選択したので、DigitalOceanアプリを設定する必要があります。この例では、サーバーは北米に基づいており、地域フィールドでNew Yorkを選択し、デプロイメントブランチはmainになります。アプリには、物理的な場所に最も近い地域を選択してください：

このチュートリアルでは、コード変更の自動デプロイをチェックしています。これにより、コードを更新するたびにアプリが自動的に再構築されます。

次へを押して、アプリの設定画面に進みます。

次に、実行するアプリケーションの種類を選択します。Reactが静的アセットをビルドするため、静的サイトをタイプフィールドのドロップダウンメニューから選択します。

注意： Create React Appは、Gatsbyのような静的サイトジェネレーターではありませんが、サーバーがRubyやPHPなどのサーバーサイドのコードを実行する必要がないため、静的アセットを使用しています。アプリはNodeを使用してインストールおよびビルドステップを実行しますが、無料のティアではアプリケーションコードを実行しません。

カスタムビルドスクリプトを使用するオプションもあります。ただし、この場合はデフォルトのnpm run buildコマンドを使用してください。品質保証（QA）または本番環境のために異なるビルドスクリプトを持っている場合は、カスタムビルドスクリプトを作成することもできます：

次に進んで最終確認と起動ページに移動してください。

ここで、価格プランを選択できます。無料のスターターティアは静的サイト向けに作られていますので、それを選択してください：

スターターアプリケーションを起動ボタンを押すと、DigitalOceanがアプリケーションのビルドを開始します。

アプリケーションは、リポジトリ内のnpm ciおよびnpm buildスクリプトを実行します。これにより、すべての依存関係がダウンロードされ、JavaScript、HTMLファイル、およびその他のアセットのコンパイルおよび最小化されたバージョンが含まれるbuildディレクトリが作成されます。また、package.json内でカスタムスクリプトを作成し、App Platformのコマンドを更新することもできます。

ビルドには数分かかりますが、完了したら成功メッセージと新しいサイトへのリンクが表示されます。リンクには固有の名前が付けられ、わずかに異なる場合があります：

ライブアプリを押して、プロジェクトにブラウザからアクセスします。これはローカルでテストしたプロジェクトと同じですが、こちらはウェブ上でセキュアなURLでライブになります：

プロジェクトが構成されたので、リンクされたリポジトリに変更を加えるたびに新しいビルドが実行されます。この場合、mainブランチに変更をプッシュすると、DigitalOcean が自動的に新しい展開を実行します。ログインする必要はありません。変更をプッシュするとすぐに実行されます。

このステップでは、App Platform 上で新しい DigitalOcean アプリを作成しました。GitHub アカウントを接続し、アプリをmainブランチでビルドするように構成しました。アプリケーションを構成した後、アプリが変更ごとに新しいビルドを展開することがわかりました。

結論

DigitalOcean の App Platform は、アプリケーションを迅速に展開するための便利なツールです。わずかな初期設定で、アプリは変更ごとに自動的に展開されます。これは React と組み合わせて使用し、ウェブアプリケーションを素早く立ち上げるのに役立ちます。

A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.

Source:
https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-to-digitalocean-app-platform