Help us understand the problem. What is going on with this article?

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アカウントを取得している必要があります)
スクリーンショット 2019-12-16 23.18.57.png
Lightsailの管理画面に移動したら、インスタンスの作成ボタンをクリック。
スクリーンショット 2019-12-16 23.19.31.png
東京リージョンLinux/UnixOSのみCentOSを選択して、下にスクロールしていきます。
スクリーンショット 2019-12-16 23.19.56.png
料金は、$3.5のままでOKです。
スクリーンショット 2019-12-16 23.20.29.png
さらに下までスクロールして、インスタンスの作成をクリック。
スクリーンショット 2019-12-16 23.20.58.png
インスタンスが作成されます。数分は保留中となっているので、少し待ちましょう。
スクリーンショット 2019-12-16 23.21.13.png
実行中になったら、テキスト部分をクリックします。
スクリーンショット 2019-12-16 23.24.50.png
インスタンスの詳細ページに移動します。ここでインスタンスの状態や設定を確認できます。

SSHを使用して接続ボタンをクリックすると、ブラウザ上でサーバーに接続できます。
スクリーンショット 2019-12-16 23.25.15.png
ウインドウが新規で立ち上がり、ターミナルでサーバーを操作することができます。
スクリーンショット 2019-12-16 23.39.21.png

CentOSにNode.jsをインストール

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

$ 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とは、Reactサーバーサイドレンダリングをするためのフレームワークです。Vue.jsで言うところの、Nuxt.jsですね。

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

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

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

Reactは、本来クライアントサイドで仮想DOMを生成し、それを実DOMとしてブラウザに描画します。
スクリーンショット 2019-12-16 23.26.43.png
Next.jsでSSRすると、サーバー上でReactを実行し、生成したDOMをクライアントへ渡すことができます。また、クライアント上ではSPAになるため、シームレスなページ遷移が可能です。
スクリーンショット 2019-12-16 23.26.45.png

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

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

$ 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!!テキストをブラウザで表示してみましょう。

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

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

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

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

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

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

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

Queryパラメーターを取得

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

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要素と本文が変更されます。

インスタンスを削除する

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

管理画面の削除タブを選択肢、インスタンスの削除をクリックします。
スクリーンショット 2019-12-16 23.40.58.png
このインスタンスを削除?というモーダルが表示されるので、はい、削除しますをクリックしましょう。
スクリーンショット 2019-12-16 23.41.02.png
これで、インスタンスが削除されました。

さいごに

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away