Amazon Lightsailで気軽にサーバー構築

## Amazon Lightsail とは？

**Amazon Lightsail**は、AWSが提供しているVPS（仮想プライベートサーバー）です。数クリックでクラウド上にサーバーを構築できるので、EC2よりも手軽に使用できます。

また、LAMPやWordPress、Node.jsといったWebアプリケーションをプリインストールしているインスタンスも作成できます。

**料金は月額$3.50〜**

AWSでは珍しく、固定費用で使えます。（転送量を超えると課金されるので注意）

サーバースペックを上げると、料金も増えていきます。

$3.50のプランは**最初の1ヶ月無料**なので、サクッとインスタンスを作って実験し、削除するようなお試し環境として使いやすいです。

## Amazon Lightsail を使ってみよう!!

### 今回の構成

**CentOS**上に**Node.js**をインストールして、**Next.js**を動かしてみます。

### インスタンスの作成

**AWS マネジメントコンソール**で`lightsail`を検索して選択します。
（事前に[AWSアカウントを取得](https://aws.amazon.com/jp/what-is-aws/)している必要があります）
<img width="1178" alt="スクリーンショット 2019-12-16 23.18.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/b6296edc-29da-0281-87a6-5c980668531e.png">
**Lightsail**の管理画面に移動したら、`インスタンスの作成`ボタンをクリック。
<img width="1335" alt="スクリーンショット 2019-12-16 23.19.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/49b107af-2060-9a63-05a0-aa19a8d8ec6f.png">
`東京リージョン`、`Linux/Unix`、`OSのみ`の`CentOS`を選択して、下にスクロールしていきます。
<img width="1335" alt="スクリーンショット 2019-12-16 23.19.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/972e1d63-dfbc-c24e-7bf6-0c13006c474f.png">
料金は、$3.5のままでOKです。
<img width="1335" alt="スクリーンショット 2019-12-16 23.20.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/5700410d-6b42-003b-e831-6a5b202eb009.png">
さらに下までスクロールして、`インスタンスの作成`をクリック。
<img width="1335" alt="スクリーンショット 2019-12-16 23.20.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/eeb6ba77-80e0-17b6-e29d-9c11794ca915.png">
インスタンスが作成されます。数分は`保留中`となっているので、少し待ちましょう。
<img width="1335" alt="スクリーンショット 2019-12-16 23.21.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/7603e25c-e787-0c8a-b5fe-0a8e05c3e4e5.png">
`実行中`になったら、テキスト部分をクリックします。
<img width="1335" alt="スクリーンショット 2019-12-16 23.24.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/82f740cf-e074-cadc-c972-84c88b332d73.png">
インスタンスの詳細ページに移動します。ここでインスタンスの状態や設定を確認できます。

`SSHを使用して接続`ボタンをクリックすると、ブラウザ上でサーバーに接続できます。
<img width="1335" alt="スクリーンショット 2019-12-16 23.25.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/0018495f-b592-3e7f-2d6f-040f25ddcc2d.png">
ウインドウが新規で立ち上がり、ターミナルでサーバーを操作することができます。
<img width="1030" alt="スクリーンショット 2019-12-16 23.39.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/224e5c2a-7754-1beb-dc94-4bedffeed803.png">

### CentOSにNode.jsをインストール
Node.jsをインストールしてnpmを使えるようにしましょう。

```console
$ curl —sL https://rpm.nodesource.com/setup_12.x | sudo bash -
$ sudo yum install -y nodejs
$ node -v
$ npm -v
```

Node.jsとnpmのバージョンが表示されれば、成功です。

### Next.jsとは？

**[Next.js](https://nextjs.org/)**とは、**[React](https://ja.reactjs.org/)**で**サーバーサイドレンダリング**をするためのフレームワークです。**[Vue.js](https://jp.vuejs.org/)**で言うところの、**[Nuxt.js](https://ja.nuxtjs.org/)**ですね。

簡単にルーティングできて、静的サイトの書き出しもできます。

### サーバーサイドレンダリングとは？

**サーバーサイドレンダリング（SSR）**とは、PHPやRuby、Java、Node.js等の言語で、動的にサーバーサイドでDOMを生成してクライアントに静的なHTMLとして渡すことです。

Reactは、本来クライアントサイドで仮想DOMを生成し、それを実DOMとしてブラウザに描画します。
<img width="561" alt="スクリーンショット 2019-12-16 23.26.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/cef3bf9f-cc07-ca17-4318-f1306026ac4e.png">
Next.jsでSSRすると、サーバー上でReactを実行し、生成したDOMをクライアントへ渡すことができます。また、クライアント上ではSPAになるため、シームレスなページ遷移が可能です。
<img width="561" alt="スクリーンショット 2019-12-16 23.26.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/8ff6ffec-95ea-d73b-a625-b4c27473297a.png">

### Next.jsを使ってみよう!!

以下のコマンドを実行し、Next.jsをインストールしましょう。

```console
$ cd ~
$ mkdir nextjs_demo
$ cd nextjs_demo
$ npm init -y
$ npm i react react-dom next
```

Next.jsは`/pages`ディレクトリ内をルーティングの対象としています。`/pages`ディレクトリに`index.js`を作成し、`Hello, Next.js!!`テキストをブラウザで表示してみましょう。

```console
$ mkdir pages
$ touch pages/index.js
$ vi pages/index.js
```

`i`キーを押し、入力モードに切り替えます。

```jsx
export default () => <div>Hello, Lightsail!!</div>
```

`esc`キーで入力モードを終了し、`:wq`で保存してviを終了します。

以下のコマンドを実行し、Amazon Lightsailの画面にある**パブリック IP**をブラウザでみています。

```console
$ sudo npx next build
$ sudo npx next start -p 80
```

ブラウザ上に`Hello, Next.js`が表示されていたら成功です。

## Queryパラメーターを取得

サーバーサイドレンダリングを体験するために`pages/index.js`を以下のように変更し、URLパラメーターによってHTMLが変化することを確認してみましょう。

```jsx
import React from 'react'
import Head from 'next/head'

function Index({ query }) {
  const {text} = query
  return (
    <>
      <Head>
        <title>{text}</title>
      </Head>
      <div>{text}</div>
    </>
  )
}

Index.getInitialProps = ({ query }) => {
  return { query }
}
```

さきほどの**パブリック IP**の後ろに`?text=hogehoge`を入れてみましょう。`title`要素と本文が`hogehoge`になっているかと思います。また、`hogehoge`部分を好きな文字列に変更すると、`title`要素と本文が変更されます。

## インスタンスを削除する

不要なインスタンスを削除することにより、課金を防ぐことができます。

管理画面の`削除`タブを選択肢、`インスタンスの削除`をクリックします。
<img width="1334" alt="スクリーンショット 2019-12-16 23.40.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/56be1bfc-e42e-24d9-4668-34f5609a2d7c.png">
`このインスタンスを削除？`というモーダルが表示されるので、`はい、削除します`をクリックしましょう。
<img width="1334" alt="スクリーンショット 2019-12-16 23.41.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90339/f171f124-3e56-5e4e-c755-65ab06a7dab7.png">
これで、インスタンスが削除されました。

## さいごに

ぼくのようなデザイン側のフロントエンド開発者は、サーバーやインフラの知識が乏しいことがあるかと思います。**Amazon Lightsail**は、手軽にサーバーを構築できるので学習にぴったりですので、ぜひ触ってみてください。

それでは、よきコーディングライフを。