静的ウェブサイトをホストする

実装

• リポジトリの作成と接続

  このチュートリアルでは、リポジトリを作成して初期化する必要があります。create-react-app コマンドを使用するのが最も簡単に行う方法です。コマンドプロンプトまたはターミナルで次のコマンドを使用して、このパッケージをインストールします。

  接続するリポジトリを既に持っている場合 ステップ c までスキップします。

  Git プロバイダーに接続せずにデプロイしますか? こちらをクリックして開始します。

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

  Code snippet copied

  コピー

  このステップでは、GitHub レポジトリを作成してコードをレポジトリにコミットします。このステップを完了するには、GitHub アカウントが必要です。まだお持ちでない場合はこちらでサインアップしてください。

  a.アプリ用の新しい GitHub レポジトリを作成します (リンク)
  

  

  b.Git を初期化して、コマンドラインインターフェイスで以下のコマンドを実行する新しい GitHub レポジトリにアプリケーションをプッシュします。
  

  git init
  git remote add origin git@github.com:username/reponame.git
  git add .
  git commit -m “initial commit”
  git push origin master

  Code snippet copied

  コピー

  c.リポジトリを接続するには、Amplify コンソールにログインし、ページの上部にある [使用開始] を選択して、次に [Amplify ホスティング] の下の [使用開始] を選択します。
  

  

  

  GitHub、Bitbucket、GitLab、AWS CodeCommit のリポジトリを接続します。また、Git リポジトリを接続せずにビルドアーティファクトを手動でアップロードすることもできます (「手動デプロイ」を参照)。Amplify コンソールを承認すると、Amplify がリポジトリプロバイダーからアクセストークンを取得しますが、AWS サーバーにはトークンを保存しません。Amplify は、特定のリポジトリにインストールされているデプロイキーのみを使用してリポジトリにアクセスします。
  

  

  リポジトリサービスプロバイダーを接続したら、リポジトリを選択し、構築およびデプロイするブランチを選択します。
  

  

• ビルド設定を確認する

  Amplify は、選択したブランチのリポジトリを検査し、実行するビルドコマンドのシーケンスを自動的に検出します。ビルド設定を確認して、[Next (次へ)] をクリックします。
  

  

• 保存してデプロイする

  すべての設定を確認して、すべてが正しく設定されていることを確認します。[Save and deploy (保存してデプロイ)] を選択して、ウェブアプリをグローバルなコンテンツ配信ネットワーク (CDN) にデプロイします。フロントエンドのビルドには通常 1～2 分かかりますが、アプリのサイズによって異なる場合があります。