はじめに
インフラの学習を始め、最初の目標として「Webサーバーを構築して自作ページを公開する」ことに挑戦しました。
本記事では、クレジットカード不要・ローカル環境構築なしでLinuxサーバーを体験できる Google Cloud Shell を使い、Webサーバー（Nginx）を立てて、最終的にその成果をGitHubにアップロードするまでの手順をご紹介します。
特に、その過程で遭遇した4つの具体的なエラーとその解決策を詳しく記録しているので、これからインフラ学習を始める方や、同じようなエラーでつまずいている方の助けになれば幸いです。
想定読者
- インフラ学習を始めたばかりの方
- クレジットカードなしでWebサーバーを試したい方
- Google Cloud Shellの基本的な使い方を知りたい方
なぜGoogle Cloud Shellを選んだか
学習を始めるにあたり、いくつかの方法を検討しました。
検討した選択肢と課題
| 選択肢 | メリット | デメリット |
|---|---|---|
| VirtualBox | 完全にローカル環境 | OSイメージが数GB、ダウンロード時間が長い |
| AWS/Azure | 豊富なサービス | クレジットカード登録必須 |
| Google Cloud Shell | 即座に利用可能 | Googleアカウントのみで無料 |
Google Cloud ShellはGoogleアカウントさえあれば、ブラウザ上で即座にLinux環境を無料で利用できるため、最初のハンズオンとして最適でした。
Google Cloud Shellの特徴
- 無料: 月間50時間まで無料利用可能
- すぐに使える: ブラウザからアクセスするだけ
- 環境構築不要: 必要なツールが最初から入っている
-
5GBの永続ストレージ:
$HOMEディレクトリは保持される
前提条件・必要なもの
- Googleアカウント
- Webブラウザ（Chrome推奨）
- GitHubアカウント（最終的な成果物アップロード用）
全体の流れ
Webサーバー構築手順（成功フロー）
1. Google Cloud Shellの起動
- Google Cloud Console にアクセス
- 右上の「Cloud Shell をアクティブにする」ボタンをクリック
- ターミナルが画面下部に表示されれば準備完了
2. Nginxのインストール
# パッケージリストを更新
sudo apt update
# Nginxをインストール
sudo apt install nginx -y
インストール時に invoke-rc.d: policy-rc.d denied execution of start. というメッセージが表示されますが、これは後で解決します。
3. Nginxの設定変更（重要：ポート80 → 8080）
Cloud Shellの仕様に対応するため、Nginxが使用するポート番号を変更します。
# 設定ファイルを開く
sudo nano /etc/nginx/sites-available/default
エディタが開いたら、以下の箇所を変更：
# 変更前
listen 80 default_server;
# 変更後
listen 8080 default_server;
nanoエディタの基本操作：
- 編集後、
Ctrl + Oで保存 -
Enterで確定 -
Ctrl + Xでエディタを終了
4. テスト用のHTMLファイルを作成
# Web公開用のディレクトリに移動
cd /var/www/html
# 既存のファイルをバックアップ（念のため）
sudo mv index.nginx-debian.html index.nginx-debian.html.bak
# テスト用のHTMLファイルを作成
sudo nano index.html
以下のようなHTMLを作成してください：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのWebサーバー</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
background-color: #f0f8ff;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>🎉 Webサーバー構築成功！</h1>
<p>Google Cloud ShellでNginxを使ってWebサーバーを立てることができました。</p>
<p>作成日時: <script>document.write(new Date().toLocaleString('ja-JP'));</script></p>
</div>
</body>
</html>
5. Nginxを起動してプレビュー
# Nginxを手動で起動（重要！）
sudo service nginx start
# 設定ファイルをテスト
sudo nginx -t
# サービス状態を確認
sudo service nginx status
# curlコマンドでサーバーが内部で動いているか確認
curl localhost:8080
HTMLコードが表示されればOKです。
6. Webプレビューで確認
- Cloud Shell右上の「ウェブでプレビュー」ボタンをクリック
- 「ポート8080でプレビュー」を選択
- 新しいタブで作成したページが表示される
実際に遭遇した4つのエラーとその解決策
エラー1：Nginxが自動起動せず、プレビューが繋がらない
🚫 症状
$ curl localhost
curl: (7) Failed to connect to localhost port 80: Connection refused
sudo apt install nginx -y コマンドは成功したのに、「ウェブでプレビュー」を押してもページが表示されない。
🔍 原因分析
インストール時のログをよく見ると以下のメッセージが出力されています：
invoke-rc.d: policy-rc.d denied execution of start.
Cloud Shellの環境では、セキュリティ上の理由から、パッケージをインストールしてもサービスが自動で起動しない仕様になっています。
✅ 解決策
# Nginxを手動で起動
sudo service nginx start
# 起動確認
sudo service nginx status
サービスが自動起動しない場合は、systemctl is-enabled nginx で自動起動設定を確認できます。
エラー2：ポート80番でのプレビューができない
🚫 症状
「ウェブでプレビュー」→「ポートを変更」でデフォルトの80番を指定すると：
エラー: ポート番号には 2000〜65000 を指定してください
🔍 原因分析
Google Cloud Shellの「ウェブでプレビュー」機能は、セキュリティ上の理由から利用できるポート番号が2000番以上に制限されています。
✅ 解決策
Nginxの設定ファイルでポート番号を変更：
sudo nano /etc/nginx/sites-available/default
# 変更箇所
listen 8080 default_server;
listen [::]:8080 default_server;
設定変更後は必ずサービスを再起動：
sudo service nginx restart
エラー3：git init で Permission denied エラー
🚫 症状
$ cd /var/www/html
$ git init
fatal: could not create work tree dir '.git': Permission denied
🔍 原因分析
/var/www/htmlはWebサーバーが利用するシステム用のディレクトリであり、一般ユーザーによる書き込みが制限されています。
✅ 解決策
ホームディレクトリに作業用フォルダを作成し、そこでGit管理を行う：
# ホームディレクトリに移動
cd ~
# プロジェクト用ディレクトリを作成
mkdir my-web-project
cd my-web-project
# 公開ディレクトリからファイルをコピー
cp /var/www/html/index.html .
# Gitリポジトリを初期化
git init
git add .
git commit -m "初回コミット: Webサーバーページ作成"
本格的な開発では、作業ディレクトリで作業後、最終的にWebサーバーのディレクトリにデプロイする流れが一般的です。
エラー4：git push で Invalid username or token エラー
🚫 症状
$ git push origin main
Username for 'https://github.com': your-username
Password for 'https://your-username@github.com': [パスワード入力]
remote: Support for password authentication was removed on August 13, 2021.
fatal: Authentication failed
🔍 原因分析
2021年8月13日以降、GitHubではパスワード認証が廃止されています。代わりに**パーソナルアクセストークン（PAT）**を使用する必要があります。
✅ 解決策
Step 1: GitHubでアクセストークンを生成
- GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
- "Generate new token (classic)" をクリック
- 以下を設定：
- Note:このトークンが何のためのものかを自分用にメモします。（例: Cloud Shell Web Project）
- Expiration（有効期限）:トークンの有効期限を設定します。（例: 30 days）
-
Select scopes（権限の選択）:
repoにチェック
Step 2: トークンを使用してpush
# リモートリポジトリを追加（事前にGitHubでリポジトリ作成済み）
git remote add origin https://github.com/your-username/your-repo.git
# pushを実行
git push -u origin main
# Username: GitHubのユーザー名を入力
# Password: 生成したトークンを貼り付け
新しいFine-grained personal access tokens使用時の注意
最新のFine-grained tokensを使用する場合は、以下の設定が必要：
- Repository access: 対象リポジトリを選択
- Permissions: Contents を "Read and write" に設定
トラブルシューティング
よくある問題と対処法
| 問題 | 確認方法 | 解決方法 |
|---|---|---|
| Nginxが起動しない | sudo service nginx status |
sudo service nginx start |
| プレビューが表示されない | ポート番号確認 | 2000番以上のポート使用 |
| 設定が反映されない | 設定ファイル確認 | sudo service nginx restart |
| Gitのpushができない | 認証方法確認 | パーソナルアクセストークン使用 |
ログの確認方法
# Nginxのエラーログ確認
sudo tail -f /var/log/nginx/error.log
# アクセスログ確認
sudo tail -f /var/log/nginx/access.log
次のステップ
この基本的なWebサーバー構築ができたら、以下のような発展的な学習に進むことができます：
- SSL/TLS証明書の設定 - HTTPSでの接続
- カスタムドメインの設定 - 独自ドメインでの公開
- Docker化 - Dockerコンテナでの環境構築
- CI/CD - GitHub Actionsを使った自動デプロイ
- Terraform - Infrastructure as Codeでの環境管理
まとめ
Webサーバーを一つ立てるだけでも、以下のような様々な要素が絡み合っていることを実感しました：
- 環境特有の仕様: Cloud Shellの制限事項
- 権限管理: システムディレクトリとユーザーディレクトリ
- ネットワーク: ポート番号の制限
- 認証: GitHubの最新セキュリティ要件
特に、エラーメッセージをしっかり読み解き、原因を切り分けていくプロセスは、非常に実践的な学びになりました。
エラーが出ても諦めずに、一つずつログを確認して対処していくことで、確実にスキルアップできると思います。
本記事は個人的な学習記録として作成しており、より良い方法や追加の情報がございましたら、ぜひお教えいただけますと幸いです。
参考リンク
コード全体
詳細なコードは、https://github.com/ishikawamasahito/my-first-website で公開してます。