【初学者でも簡単】Webサイトを爆速低コスト開発構築公開

1. はじめに

こんにちは、Elieです!今回は初心者でも簡単に低コストかつ爆速でWebサイトを公開する手順を公開します
皆さんこんな悩みはありませんか？

• Webサイトを開発してみたいけどどうやればいいの？
• Webサイトを作っては見たもののドメイン取得とかサーバレンタルとかややこしい。
• 開発＆運用コストをなるべく抑えたい。
• Webサイトを安全に開発できるかどうか自信がない。

この記事はこの悩みをすべて吹き飛ばして爆速＆低価格＆Webサイト開発を可能にします！さらにWebサイトを公開して後に内容を変更したい時や構成を変えたいという際にも極限まで更新の手順が自動化される構成になっています。初心者でも簡単にWebサイトを公開＆運用＆保守できるわけです

2. この記事の対象者

• Railsを初めて触る方
• Webサイトを公開してみたい方
• AWS/Docker/CI/CDに興味がある方
• IaCに興味がある方

3. この記事のゴール

• RailsのWebサイト構築
• AWS上へのデプロイ
• GitHub Actionsによる自動デプロイ環境の構築
• 独自ドメイン＆SSL化したWebサイト公開

4. 使用技術一覧

今回のWebサイトで用いる技術は以下の技術になっています。すべて理解できなくても全然大丈夫です。

カテゴリ	技術	役割
フレームワーク	Ruby on Rails 8	Webアプリケーション開発
IaC	Terraform	インフラのコード管理
コンテナ	Docker	アプリケーションの実行環境
CI/CD	GitHub Actions	自動デプロイ
クラウド(AWS)	EC2, VPC, ALB, Route53, ACM, SSM, S3	インフラ基盤
フロントエンド	HTML/CSS	見た目の構築

以上が今回用いる技術一覧です。この技術達がWebサイトの開発・構築・運用・保守を爆速にしてくれるのでどの技術も重要です。

5. 前提条件

必須

• GitHubアカウント(無料)
• AWSアカウント(最初は無料枠あり)

推奨環境

• Cloud Shell または ローカル環境(Linux/macOS)
• Ruby 3.4.7以上
• Rails 8.1以上

費用について

• ドメイン取得: 約$15/年(Route53で取得の場合)
• AWS利用料: 月$20-30程度

では実際に構築する準備に入りましょう

6. 爆速公開の準備

Rails インストール

AWSのCloudShellで以下のコマンドを実行しましょう。Railsがインストールされていない方は以下の指示に従ってインストールしましょう..参考リンク→(https://railsguides.jp/install_ruby_on_rails.html , https://guides.rubyonrails.org/install_ruby_on_rails.html))

$ rails --version
# ↑バージョンが出なかったらインストールされていない

# 簡単なインストール手順は以下(RubyとRails)　　上記リンクを参考にしました。
# Macの方
$ xcode-select --install
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ echo 'export PATH="/opt/homebrew/bin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc
$ brew install openssl@3 libyaml gmp rust
$ curl https://mise.run | sh
$ echo 'eval "$(~/.local/bin/mise activate)"' >> ~/.zshrc
$ source ~/.zshrc
$ mise use -g ruby@3
$ gem install rails
$ rails --version
# ↑上をまとめたのが下↓安全にインストールしたい方は上を一つずつ実行してください
$ xcode-select --install
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" && \
(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> ~/.zshrc && \
eval "$(/opt/homebrew/bin/brew shellenv)" && \
brew install openssl@3 libyaml gmp rust && \
curl https://mise.run | sh && \
echo 'eval "$(~/.local/bin/mise activate)"' >> ~/.zshrc && \
source ~/.zshrc && \
mise use -g ruby@3 && \
gem install rails && \
rails --version


# Ubuntuの方
$ sudo apt update
$ sudo apt install build-essential rustc libssl-dev libyaml-dev zlib1g-dev libgmp-dev git
$ curl https://mise.run | sh
$ echo 'eval "$(~/.local/bin/mise activate)"' >> ~/.bashrc
$ source ~/.bashrc
$ mise use -g ruby@3
$ gem install rails
$ rails --version
# 忙しい方は以下のコマンドを実行↓　ひとまとめになってます
$ sudo apt update && \
sudo apt install -y build-essential rustc libssl-dev libyaml-dev zlib1g-dev libgmp-dev git && \
curl https://mise.run | sh && \
echo 'eval "$(~/.local/bin/mise activate bash)"' >> ~/.bashrc && \
export PATH="$HOME/.local/bin:$PATH" && \
eval "$(mise activate bash)" && \
mise use -g ruby@3 && \
gem install rails && \
rails --version

インストールが完了したら以下を実行しましょう！Ruby on Railsでアプリケーションの基盤を作るコマンドです。実はこれだけですでにWebサイトの基盤は出来上がったので私たちは少しの手順を踏むだけで簡単にWebサイトを作ることができるのです。試しに以下のコマンドを実行してください。

$ rails new (アプリ名)
# 例: rails new myapp
$ PROJECT_NAME=(アプリ名)
# 例: PROJECT_NAME=myapp

# 作成したアプリへ移動
$ cd (アプリ名)

# サーバーを立てる
$ rails server 

# 以下のコマンドを実行するか、ブラウザでhttp://localhost:3000/にアクセスするとデフォルト画面が出てくる
$ curl http://localhost:3000/

このようにRuby on Railsはこの[$ rails new]だけで基盤が出来上がるので超爆速開発が可能なんです

AWSセットアップ

では次はAWSのセットアップを行いましょう！
まずIAMユーザを作成しましょう。
AWSログイン→IAM→ユーザ→ユーザの作成→グループを作成で以下の許可ポリシーを追加→作成
ユーザ名: (例)github-actioins-deployer
許可ポリシーリスト
EC2、VPC、SSM、Route53、S3、CertificateManager、IAM
↑
適切な権限を設定してください。余分な権限は付与しないようにしてください。(最小権限の原則)
次にアクセスキーを作成してAccessKeyIDとSecretAccessKeyをメモしておく。
このAccessKeyIDとSecretAccessKeyを使ってローカルでAWS CLIの設定をします

# AWS CLIプロファイル設定
aws configure --profile [プロファイルの名前]
# 例: aws configure --profile rails-portfolio

# 入力内容
AWS Access Key ID: <メモしたAccessKeyID>
AWS Secret Access Key: <メモしたSecretAccessKey>
Default region name: ap-northeast-1
Default output format: json

# 確認
aws sts get-caller-identity --profile [プロファイルの名前]
# 例: aws sts get-caller-identity --profile rails-portfolio

GitHubセットアップ

次にGitHubの設定をしましょう。まずGitHubで新たなリポジトリを作成してください。Privateリポジトリが安全です。リポジトリの名前は何でもよいです。
作成ができたらリポジトリのSettings→Secrets and variables→Actions→Secrets→Repository secretsでGitHub Secretを登録します。内容は以下の通りです。

Secret名	値の取得方法
AWS_ACCESS_KEY_ID	先ほどのAccessKeyID
AWS_SECRET_ACCESS_KEY	先ほどのSecretAccessKey
RAILS_MASTER_KEY	$ cat config/master.keyの出力

そして以下のコマンドを実行してください。必要なファイルの作成やツール(awscliやterraform)のインストールなどを自動化します。

$ curl -o setup.sh https://raw.githubusercontent.com/Elie314159265/Elie_Ruby_on_Rails_website/main/setup.sh
$ chmod +x setup.sh
$ ./setup.sh
# 実行後、流れに沿って設定していってください。
# ※awscliやterraformなどの必要なツールがインストールされます。
# MacOSかLinuxかは自動で判別されるので安心して実行してください(*‘ω‘ *)

実行すると以下のディレクトリ構成となります。

# プロジェクト構造
# setup.sh実行後、以下のような構造になります:

your-project/
├── app/                    # Railsアプリケーション本体
├── config/
│   ├── master.key         # アプリケーションの秘密情報を安全に管理するための重要な要素
│   └── routes.rb          # ルーティング設定
├── terraform/             # インフラ定義
│   ├── main.tf           # メインの設定
│   ├── variables.tf      # 変数定義
│   ├── outputs.tf        # 出力値
│   └── terraform.tfvars  # 実際の値(Git管理外)
├── .github/
│   └── workflows/
│       ├── deploy-app.yml       # アプリデプロイ
│       └── terraform-plan.yml   # インフラ変更確認
├── Dockerfile            # コンテナ定義
└── setup.sh             # 自動セットアップスクリプト

ドメイン購入

ドメインをまだ購入していない方は、次にAWSのコンソールからRoute53へ移動して左側の一覧メニューからドメイン→リクエストへ移動してドメインを購入しましょう。こちらは今回の初期セットアップで最も費用が掛かる(購入時に$15かかる)ので手動購入としました。(ドメイン購入を自動化するとまずいと思ったので)購入が完了したらRoute53→ホストゾーンへ移動し購入したドメインのホストゾーンが作成されていなければ作成しましょう。

7. TerraformでAWSリソースを自動作成

ここからはいよいよ AWSのリソースを爆速自動構築します。手作業でポチポチやってるとミスも発生したり遅いですよね。
Terraformを使うと、VPC・EC2・ALB・Route53・ACM など面倒な設定をすべて一発で作れます。

$ cd terraform
$ terraform init
$ terraform plan
# ※↓下のコマンドを実行すると必要なAWSリソースが一括ですべて作成されます↓
$ terraform apply
# yes と入力するとリソース作成が始まります。
# ここまででインフラ基盤は全自動構築されます。
# 完了するまでに約30分~1時間かかることがあります。
# リソースの削除は以下のコマンドを実行。一括削除されます。(一部のリソースが残ることがあります)
$ terraform destroy

AWSリソースの作成が完了したら最後にコードをGitHubにPushします。
このPushした段階でGitHub Actionsのworkflowが発火して処理が始まります。
この処理が成功するとRailsWebアプリケーションが無事に構築できたことになります

git add .
git commit -m "first commit"
git push origin main

プッシュ後、GitHub Actions が次の処理を自動実行します(ちょっと複雑)
① トリガー
main ブランチにコードがpush
対象ファイルは Rails アプリ本体のみ（不要なトリガーを防止）
② AWS 認証
GitHub Secrets の AWS_ACCESS_KEY_ID と AWS_SECRET_ACCESS_KEY を使って
GitHub Actions 内で AWS CLI を使えるようにします。
③ EC2 インスタンスの検出
Project タグで自動検索 → 運用時の「どのEC2にデプロイ？」問題を解消する設計。
④ Docker ビルド
ローカル環境を使わず、GitHub Actions上でDocker をビルド。
docker build -t [プロジェクト名]:latest .
⑤ EC2 の状態確認
AWS CLI で InstanceStatus をチェックし、
ready 状態になるまで待機。運用トラブルを避ける設計。
⑥ S3 経由で Docker イメージ転送
GitHub → S3（temporary bucket）→ EC2 という流れ。一時S3バケットを作成し、Dockerイメージをアップロード→デプロイ完了後には自動削除
⑦ SSM (Systems Manager) 経由デプロイ
EC2 に SSH 接続せず、AWS SSM の send-command を使って安全にデプロイ。
⑧ 公開用URL表示。このURLにアクセスするとWebサイトへ行ける。

8. まとめ

今回は本格的な構成(AWS×Rails8×Terraform×GitHub Actions)でWebサイトの構築ができました。本記事はWebサイトを公開する手順のみの記載でしたがこう思いませんか？

• このWebサイトのフロントエンド部分を自分でカスタマイズしたい！
• このAWSの構成を改良したい！
• いろいろな機能をバックエンドに搭載してみたい！

安心してください。今回の構成はこのような更新手順を極限まで省くことが既にできているのです。どういうことかというと、例えばWebページを更新する際にはコードを変更してその変更をGitHubにpushするだけで自動で更新されるのです。さらにAWSの構成を変えたい場合はTerraformという技術ですべてAWSリソースはコードで管理(IaC)されているのでそこに追加または削除して(terraform plan & terraform apply)を実行するだけでよいのです。素晴らしいと思いませんか？今回はWebサイトの基盤と爆速更新が可能な環境が整ったので自分好みにカスタマイズしておしゃれなWebサイトを作りましょう！

ちなみに...

筆者はこの構成でいかのWebサイトを構築しました。
https://elie-portfolio.com/
良かったら覗いてみてください(゜-゜)