joppot

コピペで絶対動く。説明を妥協しない

サーバ

Reactをawsコマンドを使ってs3にデプロイする

投稿日:2018年11月26日 更新日:


概要

みなさんこんにちはcandleです。今回はcreate-react-appで作成したreactプロジェクトをS3にデプロイしてみたいと思います。React webのいいところはbuildして作られた最終成果物はhtmlとjsファイルや画像などストレージにアップロードさえすれば公開が可能になります。

この記事では以下の3つは紹介しません。

  1. S3にアクセスできるIAMの取得の仕方
  2. Route53などを利用して独自ドメインを割り振る
  3. サイトをSSL接続する

前提

  1. awsコマンドがインストールされている

Macにあらかじめawsコマンドをインストールしておいてください。おすすめはbrewでawscliを入れる方法です。

準備

この記事では本当に世界中に公開される方法を紹介します。セキュリティなどの観点から今自分が作っているサービスを公開してしまうのはまずい場合はサンプルプロジェクトを作ることをお勧めします。

create-react-app react-deploy-sample
cd react-deploy-sample

ファイル自体は特にいじりません。デフォルトの状態のままデプロイしてみたいと思います。

デプロイ先のS3のバケットを作成する

awsのS3管理ページに移動して、「バケットを作成する」ボタンを押します。


注意 もしもバケットにRoute53の独自のドメインを割り振りたい場合は、必ずS3バケット名とRoute53で取得したドメイン名は同じにしてください。

例えば、ドメイン名が「hogehoge.com」 ならS3のバケット名も「hogehoge.com」にします。


最初の「名前とリージョン」セクションでは任意のバケット名前にして、リージョンは日本なら「アジアパシフィック(東京」 にします。「次へ」を押します。

「オプションの設定」は特に何もせずに「次へ」を押します。

「アクセス許可の設定」では、公開予定のバケットなので、チェックを全て外しておきます。「次へ」を押し、最後の確認画面で、「バケットを作成」を押してバケットが作られます。

スタティックページ公開設定

続いて、バケット一覧から作成したバケットを選び、「プロパティ」から「Static website hosting」を選びます。

「このバケットを使用してウェブサイトをホストする」を選び、「インデックスドキュメント」にindex.htmlと記入します。
上の、エンドポイントと表示されているのがReactで公開されるURLになります。もちろん後からRoute53などで別のドメインを割り振ることも可能です。このエンドポイントURLをコピーしておきましょう。

「保存」ボタンを押します。

これでここにreactプロジェクトがアップロードされるとindex.htmlをウェブページとして利用できます。

公開するためのバケットポリシー

続いて、このバケットを外部公開するためのバケットポリシーを記述します。「アクセス権限」のタブで「バケットポリシー」 を選択します。

エディタにこれを記述します。「バケット名」 のところには自分のS3バケット名を入れてください。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

書いたら「保存」ボタンを押しましょう。

S3デプロイするためのIAMを取得

S3にアクセス権限があるIAMの取得の仕方はこの記事とは直接関係ないのでここでは解説しません。
もしも、既に持っている方はそれを利用してもらえればと思います。持っていない方は別途取得してください。
この記事を参照して頂ければと思います。この記事を書いてから時間がかなり経ってしまい、内容が古くなってしまって大変恐縮です。

awsのs3を操作する為のaccess keyとsecret keyを取得する(IAM)

また、本番開発用に作成する場合はS3へはフルアクセスではなく任意のバケットへのみ適当なアクセス権限できるIAMを取得するべきです。

何れにしても、S3へアクセスできるaccess_keyとsecret_keyを用意してください。

Access KeyとSecret Keyを登録する

続いて、awsコマンドにいま取得したIAMを登録します。登録するときはプロフィール名を決めます。この記事ではtestと命名しますが、多くの場合はサービス名を使います。

エディタで~/.aws/credentialsを開きます。

中身をこんな感じに設定します。もしも、[default]がすでに設定されている人はそれの下とかに次の記述をします。[test]がプロフィール名です。

周知の事だと思いますが、絶対にaccess_keyとsecret_keyは公開しないでください。下の画像のキーは適当に作ってます。

[test]
aws_access_key_id = 12345678987654321
aws_secret_access_key = qwerty987654321

保存できたら、次に~/.aws/configを開きます。これを記述しましょう。

[profile test]
region = ap-northeast-1

これでawsの設定は以上です。awsコマンドでs3にアップロードするときに、testプロフィールを指定してあげればファイルのアップロードが可能になります。

reactプロジェクトをデプロイする

再び、サンプル用のreactプロジェクトに移動します。まだ、buildフォルダがありませんね。S3へアップロードする前に本番用のコードをビルドします。

ビルドします。

GENERATE_SOURCEMAP=false yarn run build

私のReactは16.6.xなので少しファイルの構成が新しいです。

buildフォルダが完成したらこれをS3にアップロードします。

アップロードの一般式はこちら

aws s3 sync /build s3://{バケット名} --exclude '*.DS_Store' --acl public-read --profile {プロフィール名}

私の場合ですと、こうなります。

aws s3 sync build/ s3://the_name_of_bucket --exclude '*.DS_Store' --acl public-read --profile test

デプロイできました。

確認する

先ほどのバケットを作成した時のエンドポイントURLをブラウザで開きます。

http://バケット名.s3-website-ap-northeast-1.amazonaws.com

reactが動いていますね。

まとめ

reatの本番環境をサクッとデプロイして、サーバレスで実行できるのは本当に便利ですね。

この記事では、独自ドメインの割り振りを行なっていませんが、次回以降解説していきたいと思います。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-サーバ
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

AMIMOTO AMIのnginx上でvirtual hostを設定してphpサービスをリリースする

概要 みなさんこんにちはcandleです。今回はAMIMOTO AMIのnginx上でバーチャルホストを使う場合の設定をやってみたいと思います。 AMIMOTO AMIは高速でwordpressを作成 …

CentOS6.5にcomposerをインストールする

概要 みなさんこんにちはcandleです。cakephpではphpのライブラリ管理ツールcomposerと連帯して、便利に必要なライブラリを導入できます。 例えば、cakephpの標準テストツールph …

sshコマンドをaliasかssh configを使って短縮する

概要 みなさんこんにちはcandleです。今回はsshの接続先のホスト名を短くする方法です。 ssh接続は非常に強力なネットワークツールですが、接続先の指定がやや面倒ですね。それを単純にする方法をまと …

AWS環境でELB(ロードバランサー)とEC2サーバでapacheを使っている場合にhttpからhttpsにリダイレクトする方法

概要 みなさんこんにちはcandleです。今回はマニアックな記事ですが、恐らくスタートアップ企業などではわりと使う内容だと思うのでまとめておきます。 この方法が全てのサービス上でベストなやり方なのかど …

macにmemcachedをインストールする方法と動作確認

概要 memcachedはrailsやphpのセッションを保持しておく時に使うソフトというかサーバ的なものです。一般にSNSやログイン式のサービスを提供する時はセッションというのを持ちます。セッション …


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー