開発者ドキュメント

ReactアプリケーションをDigitalOceanアプリプラットフォームにデプロイする方法

getdocs

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

注：このチュートリアルでは、ReactとAppPlatformを使用して静的アセットとサイトをデプロイする方法を示します。 動的なバックエンドコードを使用してReactアプリケーションをデプロイする場合は、公式ドキュメントの AppPlatformReactサンプルを確認してください。

序章

DigitalOceanのAppPlatform は、 Platform as a Service（PaaS）製品であり、ソースリポジトリからアプリケーションを構成およびデプロイできます。 アプリを構成した後、DigitalOceanは変更のたびにアプリケーションを構築してデプロイし、最小限の構成で完全なWebサーバーとデプロイパイプラインのメリットを提供します。 これは、 React アプリケーションをすばやく効率的にデプロイする方法です。また、Reactを使用してバックエンドのないサイトを構築している場合は、AppPlatformの無料利用枠を使用できます。

このチュートリアルでは、無料のスターター層を使用して、ReactアプリケーションをDigitalOceanAppPlatformにデプロイします。 Create React App を使用してアプリケーションをビルドし、コードを GitHub リポジトリにプッシュしてから、アプリケーションをDigitalOceanアプリとして構成します。 アプリをソースコードに接続し、プロジェクトを静的ファイルのセットとしてデプロイします。

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

前提条件

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

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

開始するには、ローカルマシンでCreateReactAppを使用して新しいアプリケーションを作成します。 ターミナルで、コマンドを実行してdigital-ocean-appというアプリケーションをビルドします。

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

The npx コマンドは、Nodeパッケージをマシンにダウンロードせずに実行します。 The create-react-app スクリプトはすべての依存関係をインストールし、ベースプロジェクトを構築します digital-ocean-app ディレクトリ。 Create React Appの詳細については、チュートリアル Create ReactAppを使用してReactプロジェクトをセットアップする方法を確認してください。

コードは依存関係をダウンロードし、ベースプロジェクトを作成します。 完了するまでに数分かかる場合があります。 完了すると、成功メッセージが表示されます。 代わりに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にプッシュする

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

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アプリを使用してプロジェクトにアクセスできるようにします。 次に、プロジェクトを使用して新しいDigitalOceanアプリを作成し、自動展開を設定します。

ステップ3—DigitalOceanアプリプラットフォームへのデプロイ

このステップでは、ReactアプリケーションをDigitalOceanAppPlatformにデプロイします。 GitHubリポジトリをDigitalOceanに接続し、ビルドするプロジェクトを構成して、最初のプロジェクトをビルドします。 プロジェクトが稼働した後、変更のたびに新しいビルドと更新がトリガーされます。

このステップを完了すると、DigitalOceanで継続的デリバリーを使用してアプリケーションをデプロイできるようになります。

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

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

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

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

リポジトリを選択したので、DigitalOceanアプリを構成する必要があります。 この例では、RegionフィールドでNewYork を選択することにより、サーバーは北米に拠点を置き、展開ブランチはmainになります。 アプリの場合、物理的な場所に最も近い地域を選択します。

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

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

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

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

カスタムビルドスクリプトを使用するオプションもあります。 ただし、この場合、デフォルトのままにすることができます npm run build 指図。 品質保証（QA）または実稼働環境用に別のビルドスクリプトがある場合は、カスタムビルドスクリプトを作成することをお勧めします。

次へを押して、ファイナライズして起動ページに移動します。

ここで料金プランを選択できます。 無料のStarter層は静的サイト用に作成されているため、次のいずれかを選択します。

Launch Starter App ボタンを押すと、DigitalOceanがアプリケーションの構築を開始します。

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

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

Live App を押して、ブラウザでプロジェクトにアクセスします。 ローカルでテストしたプロジェクトと同じですが、これは安全なURLを使用してWeb上で公開されます。

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

このステップでは、AppPlatformで新しいDigitalOceanアプリを作成しました。 GitHubアカウントを接続し、mainブランチを構築するようにアプリを構成しました。 アプリケーションを構成した後、変更のたびにアプリが新しいビルドをデプロイすることを学びました。

結論

DigitalOceanのAppPlatformは、アプリケーションをデプロイするためのクイックツールを提供します。 小さな初期設定で、アプリは変更のたびに自動的にデプロイされます。 これをReactと組み合わせて使用すると、Webアプリケーションをすばやく起動して実行できます。

このようなプロジェクトで考えられる次のステップは、アプリのドメイン名を変更することです。 これを行うには、 AppPlatformの公式ドキュメントをご覧ください。

モバイルバージョンを終了