概要

プログラミングや周辺知識を学ぶには とにかくやってみる！ ことが重要です。
でも、何をどうやって動かせばよいかわからない 人もいるのではと思います。

「オレのMarkdownブログサーバをAWS上に作ろう！」のタイトルあるように、今回の記事では、マークダウンでブログを書くことができるブログサーバを独自で構築します。

とにかくやってみる！ ことで、プログラミングや周辺知識を学ぶはじめの一歩として役に立てば幸いです。

前提条件

本記事では、下記を前提とします。

• AWS(= Amason Web Services) のアカウントを取得済みであること。
• Windows 10 の開発環境

目的

今回の記事では、マークダウンでブログを書くことができるブログサーバを AWS(= Amazon Web Services) で作成します。
これまでの記事を参考にしながら次の流れで作成します。

1. お名前.com で 独自ドメインを取得する。
2. AWS S3 を使用し、Webサーバを構築する。
3. Node.jsの開発環境をVisual Stdio Codeで作成する。
4. Next.jsでブログサーバを動かしてみる。
5. Next.jsで作成したブログサーバを公開する。

目次

内容

ブログサーバを作成するゴールに向かうのですが、ゴールしたときの全体構成イメージから説明し、全体から細かいところへブレークダウンするように解説します。

全体構成イメージ

ユーザがブログを見た場合の流れ

まずユーザがデバイス（スマホやパソコン）を使用して、ブログにアクセス（ブログを見る）場合の流れを解説します。

1. ユーザはインターネット検索結果などから、ブログのアドレス(https://k69blog.com など)にアクセスします。
2. お名前.comで取得した独自ドメイン（k69blog.comなど）を経由し、AWS Cloudにアクセスします。
3. AWS Cloud は開発者がアップロードしたブログ記事のデータをユーザのブラウザに返却し表示します。（ブログが見れる状態）

開発者がブログをアップロードした場合の流れ

次に開発者がブログをアップロードした場合の流れを解説します。

1. 開発者は開発用パソコン（Windows 10）で、Next.js(Reactのフレームワーク)を使ってMarkdownでブログを作成します。
2. 作成したブログ記事をAmazon S3 サービスにアップロードします。
3. Amazon S3 サービスにアップロードされた記事は、Amazon Cloudfront にキャッシュ展開されます。
4. 最新データが キャッシュ展開された後、ユーザは最新ブログ記事を見ることができます。

全体構成のイメージができたところで、細かいところを見ていきましょう。

お名前．com で 独自ドメインを取得する

お名前.com で 独自ドメインを取得する手順はこちらで解説しています。

AWS S3 を使用してWebサーバを構築する

AWS S3 を Webサーバを構築する手順はこちらで解説しています。

このブログでは「自己紹介ホームページの作成」した後、Webサーバ（AWS S3）アップロードされていますが、この"自己紹介ホームページ"の代わりにブログサーバ（この後で作成）をアップロードします。

Nodejsの開発環境をVisual Stdio Codeで作成する

ここでNode.jsを動かすための環境を作成します。
Node.jsの開発環境を Visual Studio Code で作成する手順はこちらで解説しています。

Nextjsでブログサーバを動かしてみる

ここでNext.js(Reactのフレームワーク)のサンプルを動かします。
手順はこちらで解説しています。

Nextjsで作成したブログサーバを公開する

最後に作成したブログサーバをビルド（コンパイル）して、エクスポート（静的HTML変換）します。
そしてWebサーバ（AWS S3）に静的HTMLをアップロードすることでブログサーバを公開します。

それでは詳細の手順を解説します。

１．エクスポートの準備

こちらの記事で、ターミナルでyarn dev を実行し、http://localhost:3000 で画面を見ながら作業します。 と説明しました。

エクスポート（静的HTML変換）もyarnコマンドを使用しますが、エクスポート（静的HTML変換）の前にビルド（コンパイル）が必要となります。

ビルドはnext buildコマンド、エクスポートはnext exportコマンドなのですが、毎回2つのコマンドを実行するのは大変なので、ビルドしたらエクスポートも一緒に実行するようにpackage.jsonを変更します。

修正前

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "typecheck": "tsc"
  },

修正後

  "scripts": {
    "dev": "next",
    "build": "next build && next export",    ★修正箇所
    "start": "next start",
    "typecheck": "tsc"
  },

package.json を修正することで、yarn buildコマンドを実行するだけで、ビルドとエクスポート（静的HTML変換）が1回でできます。

yarn build

２．エクスポートした資産をWebサーバにアップロード

エクスポートされた資産はoutフォルダに格納されます。

Webサーバ（AWS S3）にアップロードする手順はこちらにある自己紹介ホームページの公開のS3へのアップロードと公開の詳細手順（画面キャプチャあり）を参考にしてください。

自己紹介ホームページの代わりに、今回作成したoutフォルダをWebサーバ（AWS S3）にアップロードします。

まとめ

独自ドメインのブログサーバを作ることはできたでしょうか。
独自ドメインを取得してから、ブログサーバを公開するまでかなりのボリュームがあったと思いますが、フロントエンドからクラウドの一部にふれることでいろいろな発見や学びがあり、モノづくりに興味を持ってもらえればうれしく思います。

筆者（k69）自身もこの仕組をカスタマイズしながら、楽しくブログ活動をしています。
その結果として、フロントエンドの知識も学び、フルスタックエンジニアに近づければいいなと思っていたりします。