メインコンテンツへスキップ

AWS Amplify 自習 7日目「React アプリケーションのデプロイとホスト」

    「React アプリケーションの構築」チュートリアルをやってみる。

    7日目は、AWS AmplifyでReactアプリのデプロイとホスティングをする。

    モジュール 1: React アプリケーションをデプロイしてホストする

    Reactアプリケーションの作成

    $ npx create-react-app amplifyapp
    npx: installed 67 in 5.697s
    
    Creating a new React app in /amplifyapp.
    
    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template...
    
    yarn add v1.22.4
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
    [4/4] 🔨  Building fresh packages...
    success Saved lockfile.
    warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.22.4".
    info To upgrade, run the following command:
    $ brew upgrade yarn
    success Saved 6 new dependencies.
    info Direct dependencies
    ├─ cra-template@1.1.1
    ├─ react-dom@17.0.1
    ├─ react-scripts@4.0.1
    └─ react@17.0.1
    info All dependencies
    ├─ cra-template@1.1.1
    ├─ react-dev-utils@11.0.1
    ├─ react-dom@17.0.1
    ├─ react-scripts@4.0.1
    ├─ react@17.0.1
    └─ scheduler@0.20.1
    ✨  Done in 54.68s.
    
    Initialized a git repository.
    
    Installing template dependencies using yarnpkg...
    yarn add v1.22.4
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
    warning " > @testing-library/user-event@12.2.2" has unmet peer dependency "@testing-library/dom@>=7.21.4".
    [4/4] 🔨  Building fresh packages...
    success Saved lockfile.
    success Saved 17 new dependencies.
    info Direct dependencies
    ├─ @testing-library/jest-dom@5.11.6
    ├─ @testing-library/react@11.2.2
    ├─ @testing-library/user-event@12.2.2
    ├─ react-dom@17.0.1
    ├─ react@17.0.1
    └─ web-vitals@0.2.4
    info All dependencies
    ├─ @testing-library/dom@7.28.1
    ├─ @testing-library/jest-dom@5.11.6
    ├─ @testing-library/react@11.2.2
    ├─ @testing-library/user-event@12.2.2
    ├─ @types/aria-query@4.2.0
    ├─ @types/jest@26.0.15
    ├─ @types/testing-library__jest-dom@5.9.5
    ├─ css.escape@1.5.1
    ├─ css@3.0.0
    ├─ dom-accessibility-api@0.5.4
    ├─ lz-string@1.4.4
    ├─ min-indent@1.0.1
    ├─ react-dom@17.0.1
    ├─ react@17.0.1
    ├─ redent@3.0.0
    ├─ strip-indent@3.0.0
    └─ web-vitals@0.2.4
    ✨  Done in 8.94s.
    Removing template package using yarnpkg...
    
    yarn remove v1.22.4
    [1/2] 🗑  Removing module cra-template...
    [2/2] 🔨  Regenerating lockfile and installing missing dependencies...
    warning " > @testing-library/user-event@12.2.2" has unmet peer dependency "@testing-library/dom@>=7.21.4".
    warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
    success Uninstalled packages.
    ✨  Done in 10.41s.
    
    Created git commit.
    
    Success! Created amplifyapp at /hands-on-02/amplifyapp
    Inside that directory, you can run several commands:
    
     yarn start
       Starts the development server.
    
     yarn build
       Bundles the app into static files for production.
    
     yarn test
       Starts the test runner.
    
     yarn 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 amplifyapp
     yarn start
    
    Happy hacking!
    $ ls -la
    total 0
    drwxr-xr-x   3 kazoo  staff   96 Nov 30 07:27 .
    drwxr-xr-x   5 kazoo  staff  160 Nov 30 07:26 ..
    drwxr-xr-x  10 kazoo  staff  320 Nov 30 07:28 amplifyapp
    $ cd amplifyapp/
    $ tree -L 1 .
    .
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── public
    ├── src
    └── yarn.lock
    
    3 directories, 3 files
    $ tree -L 1 ./src
    ./src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js
    
    $npm start
    Compiled successfully!
    
    You can now view amplifyapp in the browser.
    
     Local:            http://localhost:3000
     On Your Network:  http://192.168.0.10:3000
    
    Note that the development build is not optimized.
    To create a production build, use yarn build.

    スクリーンショット 2020-11-30 8.08.51

    Gitリポジトリにアプリをpush

    1. Gitリポジトリを作成

    スクリーンショット 2020-11-30 8.36.57

    2. Gitリポジトリにpush

    $ git branch
    * master
    $ git remote add origin https://github.com/sy250/amplifyapp.git
    $ git status
    On branch master
    Changes not staged for commit:
     (use "git add <file>..." to update what will be committed)
     (use "git checkout -- <file>..." to discard changes in working directory)
    
           modified:   .gitignore
    
    no changes added to commit (use "git add" and/or "git commit -a")
    $ git add .
    $ git commit -m "initial commit"
    [master 7d8d314] initial commit
    1 file changed, 2 insertions(+)
    $ git push origin master
    Enumerating objects: 25, done.
    Counting objects: 100% (25/25), done.
    Delta compression using up to 4 threads
    Compressing objects: 100% (25/25), done.
    Writing objects: 100% (25/25), 210.89 KiB | 3.70 MiB/s, done.
    Total 25 (delta 2), reused 0 (delta 0)
    remote: Resolving deltas: 100% (2/2), done.
    To https://github.com/sy250/amplifyapp.git
    * [new branch]      master -> master

    Amplifyにデプロイ

    GitHubのリポジトリにpushしたファイルをAmplifyにデプロイする。

    1. Amplifyコンソールから「アプリの作成」押下
    2. リポジトリにGitHubを選択して「Continue」押下
    3. GitHubリポジトリを選択して「OK」押下

    スクリーンショット 2020-11-30 8.54.47

    4. ビルド設定はデフォルトで「次へ」押下

    スクリーンショット 2020-11-30 9.00.05

    5. 確認して「保存してデプロイ」押下

    スクリーンショット 2020-11-30 9.01.01

    スクリーンショット 2020-11-30 9.10.34

    動作を確認

    スクリーンショット 2020-11-30 9.12.05

    コードの変更

    ローカルでコードを変更して、GitHubのリポジトリにpushする。自動でAmplifyでコードがビルドされて変更が反映されることを確認する。

    スクリーンショット 2020-11-30 9.22.26

    参考



    あなたへのおすすめ