Skip to content

Latest commit

 

History

History
100 lines (66 loc) · 3.19 KB

section06.md

File metadata and controls

100 lines (66 loc) · 3.19 KB
Raw

6. Cloud9 でアプリケーションの設定

Amplify で作成したバックエンドの設定とコンポーネントをアプリケーションにダウンロードし、動作を確認します。

amplify

  • Amplify のアプリケーションの画面でローカル設定の手順に書かれているコマンドをコピーします。
amplify pull --appId ******** --envName ***
  • コピーしたコマンドの pull を configure に置き換えてターミナルに入力し実行します。
cd ~/environment/handson/amplify-homes
amplify configure --appId ********* --envName dev
Opening link: https://ap-northeast-1.admin.amplifyapp.com/admin/***********/dev/verify/?loginVersion=1
✔ Confirm login in the browser or manually paste in your CLI login

amplify

  • 「Copy CLI login key」をクリックし、key をコピーしたら、ターミナルに戻り、貼り付けます。
✔ Successfully received Amplify Studio tokens.
  • 認証が終わったら amplify pull で Amplify で作成したデータを取得します。
amplify pull
  • 途中 ? Are you sure you would like to continue? と聞かれますが Yes と入力してください。
? Are you sure you would like to continue? Yes
  • データーの読み込みが終わったら、./src/App.js を以下のコードに置き換えます。
import "./App.css";
import { NavBar, NewsItemCollection } from "./ui-components";

function App() {
  return (
    <div className="App" style={{width: "100%", padding: '20px'}}>
      <NavBar width={"100%"} />
      <NewsItemCollection width={"100%"} />
    </div>
  );
}

export default App;

ターミナルからサーバーを起動し、動作確認をします。

Cloud9 ローカルサーバー起動

  • Cloud9ターミナルタブの横にある「+」ボタンで「New Terminal」を選択し、新しいターミナルを開きます。

cloud9-terminal

  • 新しいTerminalで、ローカルサーバを起動します。
cd ~/environment/handson/amplify-homes
PORT=8080 npm start
  • 次のような出力がされた後、プレビューを確認することができるようになります。
Compiled successfully!

You can now view amplify-homes in the browser.

  Local:            http://localhost:8080
  On Your Network:  http://xxx.xxx.xxx.xxx:8080

Note that the development build is not optimized.
To create a production build, use yarn build.
  • 画面上部の「Preview」をクリックし「Preview Running Application」をクリックして、アプリケーションにアクセスします。

cloud9-preview

-> 7. Github 連携でデプロイ

-> トップへ戻る