joppot

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

プログラミング

Deploy React to s3 with aws command

投稿日:


Abstract

Hello veryone it’s me candle. In this time I will show you how to deploy a react project created by create-react-app to S3. A good thing about React web app is that you can publish the products created by building them as long as you upload them such as html and js files and images to storage.

In this article I don’t write these three items.

  1. How to get a IAM that can access to S3
  2. Allocate your own domain using Route53
  3. SSL connection of React web app

Condition

  1. You have aws command

Please install the aws command in Mac beforehand. Recommendation is to install awscli with brew.

Preparation

This post really deploys the react web app to the world. From the viewpoint of security and privacy and so on, it is recommended to create a sample project if it is bad to publish the service you are making now.

Create the project wit this command.

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

We don’t edit the files. We will deploy it with plain file structure.

Create a S3 bucket of the deployment destination

Go to the S3 management console of aws and push the “Create bucket”.


Note If you want to allocate your own domain of Route53 to the bucket, make sure that the S3 bucket name and domain name acquired by Route53 are the same.

For example, if domain name is “hogehoge.com”, S3 bucket name should be “hogehoge.com”.


In the first “Name and region” section, make it an arbitrary bucket name and the region will be ”Asia Pacific (Tokyo)” in Japan. Push the “Next” button.

In the “Configure options” section, do not do anything and push the “next”.

In the “Set permissions”, since it is a bucket to be released, all checks are to be removed. Push the “Next”, and on the last confirmation screen, push the “Create bucket” button to create the bucket.

Static page publishing settings

Next, choose the created bucket from buckets list, select the “Static website hosting” from the “property” tab.

Choose “Use this bucket to host a website”, and fill in”index document” with index.html.

The above end point is the URL where the React web app will be released. Of course it is also possible to allocate another domain later in Route53. Please copy that end point URL.

Push the “Save” button.

Now the react project is uploaded here, index.html can be used as a web page.

Bucket policy to publish

Write a bucket policy for publishing this bucket externally. Select “Bucket Policy” on “Permissions” tab.

Write this in the editor. Please write your S3 bucket name in “bucket_name”.

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

Push the “Save” button after writing.

Get IAM for deploying to S3

The way to acquire IAM that has access authority to S3 is not directly related to this article, so I will not introduce it here. If you already have it, you would use it. However if you don’t have it yet, please get IAM’s access_key and secret_key.

In any case, you should prepare access_key and secret_key that can access S3.

Register Access Key and Secret Key

Let’s register acquired IAM to aws command config. When registering IAM, decide the profile name. In this article we name it test, but in many cases we will use the service name.

Open the ~/.aws/credentials with favorite editor.

We will write the contents like this.

[test]
aws_access_key_id = 12345678987654321
aws_secret_access_key = qwerty987654321

If [default] has already been written, write [test] below it. [test] is the profile name.

I think that it is well known thing, please never release access_key and secret_key. the keys of the below image is dummy.

After saving, next open the ~/.aws/config. Write this (I’m japanese, so i set up ap-northeast-1).

[profile test]
region = ap-northeast-1

Then aws configuration is over. When uploading to s3 with the aws command, you can upload the files by specifying the test profile.

Deploy the react project

Back to the React sample project again. There are not build foler yet.
Build the production code before uploading to S3.

Let’s build.

GENERATE_SOURCEMAP=false yarn run build

My React version is 16.6.x, so the structure of the file is a little new.

When the build folder is completed, we will upload this to S3.

This is the general upload command.

aws s3 sync /build s3://{Bucket name} --exclude '*.DS_Store' --acl public-read --profile {Profile name}

In my case, like this.

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

OK we deployed it successfully.

Cheking

Open the endpoint URL at the time of creation of the bucket in the browser.

(In addition, perhaps your region is different from this URL)

http://buchekt_name.s3-website-ap-northeast-1.amazonaws.com

React web app is running.

Conclusion

It is really useful to be able to deploy reat’s production environment rapidly and run it without a server.

スポンサードリンク

If you think this article is good, share it please

-プログラミング
-, , ,

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

React Project development environment building command create-react-app is too convenient

English 日本語 Abstract Hello everyone It’s me candle. In this time we will build a “react” development environment with create-react-app command and try to hello world. Past react development was created by installing babel and other packages from npm on your own using gulp or webpack. Past react development installed babel and other packages from npm and built servers with gulp and webpack. If you use the create-react-app command, you can create react environment easily. Let’s do it. Precondition Node is already installed

Ruby regex that does not match if there are keywords that you don’t want included in the string

Abstract Hello everyone it’s me candle. In this time I would like to create a regular expression that does not pass if keywords that I do not want included in the string match. This is such case like this. For example, the regex matches these words “Bitcoin” and “Bitcoin ~” but doesn’t match “BitcoinCash” and “Bitcoin Cash”. ○ Bitcoin ○ Bitcoin Core × BitcoinCash × Bitcoin Cash Condition Nothing Write the regex This is a regex that does not match if there are keywords that you do not want included in the string. /Keyword to include(?!Keywords you do not want …

React creates dummy data using Faker.js

Abstract Hello everyone it’s me candle. Let’s try to use Faker.js in React. I think that there are various purposes for using Faker.js. In many cases you will use it for testing, but this time I’d like to create a dummy react state using Faker.js. Condition You have a basic react skill create-react-app was installed Create new project First of all, create a react project. Execute the below command in your favorite directory and create a new react project. create-react-app faker-demo cd faker-demo Installation of faker Install faker with this coommand. yarn add –dev faker it’s over. Generate dummy data …

How to fix the background scroll of react-modal

Abstract Hello everyone it’s me candle. This time I will solve the react-modal background moving problem when you scroll. Condition You use react Completed sample code If you want to run the sample code actually, you would need to install two libraries before. faker is installed for dummy data generation. yarn add faker react-modal First, I will write the sample code of the completed version. This is described in src/App.js. import React, { Component } from 'react' import Faker from 'faker' import Modal from 'react-modal' Modal.setAppElement('#root') class App extends Component { constructor(props) { super(props) this.state = { users: [], user: …

Hiragino Sans How to write to change weight in css

Abstract Hello everyone it’s me candle. In this time I will show you how to write css of Hiragino Sans.The feature of Hiragino Sans is to be able to change the weight of font from 1 to 9 levels. On the other hand, there are various ways of writing css of Hiragino Sans and I did not know exactly how to write it, so I wrote a program and test it. It will help you who will use Hiragino Sans. The quick reference is released here. http://hiragino.joppot.info Condition Nothing SPONSORED LINK How to write css of Hiragino Sans From the …


I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.