納品前チェックリストと安全なサーバー移行・本番公開の手順


はじめに

前回の記事ではAIを使ったコードレビューの活用方法として正しいプロンプトの書き方・フィードバックの受け取り方・改善のサイクルを解説しました。今回は納品前チェックリストと安全なサーバー移行・本番公開の手順を解説します。「サイトが完成したけど本番公開の手順がわからない」「納品前に何を確認すればいいかわからない」という方は多いのではないでしょうか。副業案件での公開作業は一度のミスがクライアントに迷惑をかけます。手順を正しく理解して安心して本番公開できるようになりましょう。


1. 本番公開の前に理解しておくこと

1.1 開発環境と本番環境の違い

開発環境(ローカル環境):
→ 自分のパソコンの中で動かす環境
→ 失敗しても誰にも影響がない
→ XAMPPやMAMPでPHP/MySQLを動かす
→ URLは localhost や 127.0.0.1

ステージング環境(テスト環境):
→ 本番と同じ設定のサーバーでテストする環境
→ クライアントに確認してもらう環境
→ 本番公開前の最終確認に使う

本番環境(公開環境):
→ 実際にユーザーがアクセスするサーバー
→ 失敗するとサイトが止まってしまう
→ クライアントのビジネスに直接影響する

副業案件では:
→ 開発環境 → ステージング(確認) → 本番
の順番で進めるのが安全

1.2 よくあるミスと対策

本番公開でよくあるミス:

① データベースの接続情報を変え忘れる
   → 開発環境のDB設定のままで公開してしまう

② デバッグモードをOFFにし忘れる
   → エラー情報が画面に丸見えになる

③ 不要なファイルをそのままアップロードする
   → .DS_Store・Thumbs.db・.gitなど

④ ファイルのパーミッションを間違える
   → 500エラーになったり書き込みできなくなる

⑤ バックアップを取らずに作業する
   → 失敗しても元に戻せなくなる

⑥ メンテナンスモードにしないまま作業する
   → 作業中にユーザーがアクセスしてしまう

→ チェックリストを使って
  確認漏れをゼロにする習慣をつける

2. 納品前チェックリスト

2.1 デザイン・表示確認

【デザイン・表示確認】

□ PC(1280px以上)で正しく表示されるか
□ タブレット(768px〜1024px)で正しく表示されるか
□ スマートフォン(375px〜)で正しく表示されるか

□ 主要ブラウザで確認しているか
  □ Google Chrome(最新版)
  □ Safari(最新版)
  □ Microsoft Edge(最新版)
  □ Firefox(最新版)

□ 画像が正しく表示されているか
□ フォントが正しく表示されているか
□ アイコンが正しく表示されているか

□ ファーストビューのレイアウトが崩れていないか
□ フッターまでスクロールして確認したか
□ ホバーエフェクトが正しく動作するか

□ 印刷プレビューで問題がないか(必要な場合)

2.2 コンテンツ確認

【コンテンツ確認】

□ テキストに誤字・脱字がないか
□ 仮テキスト(Lorem ipsum)が残っていないか
□ ダミー画像が残っていないか
□ 電話番号・住所・メールアドレスが正しいか
□ 営業時間・定休日が正しいか
□ リンクがすべて正しく機能するか
□ 外部リンクは target="_blank" が設定されているか
□ 404ページが設定されているか

□ 各ページのタイトルが正しいか
□ metaディスクリプションが設定されているか
□ OGP(SNSシェア用)が設定されているか
□ ファビコンが設定されているか

2.3 機能確認

【機能確認】

□ お問い合わせフォームの送信が正しく動作するか
  □ 必須項目のバリデーションが機能するか
  □ 管理者への通知メールが届くか
  □ 自動返信メールが届くか
  □ 完了ページへのリダイレクトが動作するか

□ Google Analyticsのトラッキングコードが設置されているか
□ Google Search Consoleの設定が完了しているか

□ WordPressの場合:
  □ 管理画面にログインできるか
  □ 投稿・固定ページの編集ができるか
  □ メディアのアップロードができるか
  □ 不要なプラグインを削除・無効化しているか
  □ デフォルトのサンプルページを削除したか

□ SSL(https)が正しく設定されているか
□ httpからhttpsへリダイレクトされているか

2.4 パフォーマンス・SEO確認

【パフォーマンス・SEO確認】

□ Google Lighthouseのスコアを確認したか
  □ Performance:80以上を目指す
  □ Accessibility:90以上を目指す
  □ Best Practices:90以上を目指す
  □ SEO:90以上を目指す

□ 画像が最適化(圧縮・WebP変換)されているか
□ 画像にalt属性が設定されているか
□ ページの読み込みが3秒以内か
□ robots.txtが正しく設定されているか
□ サイトマップが作成・設置されているか

□ headタグ内のCSSが正しく読み込まれているか
□ bodyタグ閉じる前にJSが読み込まれているか(またはdefer)

2.5 セキュリティ確認

【セキュリティ確認】

□ .htaccessでセキュリティ設定がされているか
□ 管理画面のパスワードが強力か(WordPressなど)
□ 不要なファイル・ディレクトリへのアクセスが制限されているか
□ phpinfo()が公開されていないか
□ エラーメッセージが画面に表示されないか
□ データベースのパスワードがデフォルトのままでないか

□ PHPの場合:
  □ display_errors が Off になっているか
  □ 設定ファイル(config.php等)が.htaccessで保護されているか

□ ファイルのパーミッションが適切か
  □ PHPファイル:644
  □ ディレクトリ:755
  □ wp-config.php:600(WordPressの場合)

3. バックアップを取る

3.1 既存サイトのバックアップ

既存サイトがある場合(リニューアル案件)は
必ずバックアップを取ってから作業する。

バックアップの内容:

① ファイル一式
   → FTPソフトでサーバーの全ファイルをダウンロード
   → 日付フォルダを作って保存する
   例:backup_20240315/

② データベース
   → phpMyAdmin からエクスポート
   → SQL形式で保存する

③ メール設定
   → 使用しているメールアカウントの設定をメモする

バックアップの保存場所:
→ ローカルのハードディスク
→ クラウドストレージ(Google Drive・Dropbox)
→ 複数箇所に保存するのが安全

バックアップのタイミング:
→ 作業開始前に必ず取る
→ 大きな変更の前後にも取る

3.2 バックアップコマンド(MySQL)

bash

# MySQLデータベースのバックアップ(コマンドライン)
mysqldump -u ユーザー名 -p データベース名 > backup_20240315.sql

# バックアップから復元する
mysql -u ユーザー名 -p データベース名 < backup_20240315.sql

# 圧縮してバックアップ
mysqldump -u ユーザー名 -p データベース名 | gzip > backup_20240315.sql.gz

# 圧縮ファイルから復元
gunzip < backup_20240315.sql.gz | mysql -u ユーザー名 -p データベース名

4. ファイルのアップロード手順

4.1 FTPソフトの設定

FTPソフトの設定情報(レンタルサーバーの管理画面で確認する):

ホスト名(FTPサーバー):ftp.example.com
ユーザー名:           your-username
パスワード:           your-password
ポート番号:           21(FTP)または 22(SFTP)

→ SFTPが使えるなら必ずSFTPを使う
  (暗号化されていて安全)

よく使うFTPソフト:
→ FileZilla(無料・Windows/Mac/Linux対応)
→ Cyberduck(無料・Mac/Windows対応)
→ ForkLift(有料・Mac向け)

アップロードするディレクトリ:
→ さくらインターネット:/home/ユーザー名/www/
→ ロリポップ:/home/ユーザー名/ロリポップ!/
→ エックスサーバー:/home/ユーザー名/ドメイン名/public_html/

4.2 アップロードから除外するファイル

本番環境にアップロードしないファイル・フォルダ:

□ .git/              → Gitの管理ファイル
□ .gitignore         → Git設定ファイル
□ node_modules/      → npmパッケージ(大量のファイル)
□ .DS_Store          → Macが自動生成するファイル
□ Thumbs.db          → Windowsが自動生成するファイル
□ .env               → 環境変数ファイル(パスワードが入っている)
□ package.json       → 開発用設定ファイル
□ package-lock.json  → 開発用設定ファイル
□ vite.config.js     → Viteの設定ファイル
□ README.md          → 開発用ドキュメント
□ /src               → ビルド前のソースファイル(distをアップ)
□ composer.json      → Composerの設定(vendor/はアップする)

アップロードするもの:
→ HTMLファイル
→ CSSファイル(minify済みが望ましい)
→ JSファイル(minify済みが望ましい)
→ 画像ファイル
→ PHPファイル
→ .htaccessファイル
→ vendor/(PHPMailerなどのライブラリを使う場合)

4.3 .htaccessの設定

apache

# .htaccess の基本設定

# ===== HTTPSへのリダイレクト =====
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# ===== wwwありに統一する(wwwなしの場合は逆にする) =====
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# ===== セキュリティ設定 =====

# .htaccessファイル自体へのアクセスを禁止する
<Files .htaccess>
    Order allow,deny
    Deny from all
</Files>

# 設定ファイルへのアクセスを禁止する
<Files config.php>
    Order allow,deny
    Deny from all
</Files>

# .envファイルへのアクセスを禁止する
<Files .env>
    Order allow,deny
    Deny from all
</Files>

# ディレクトリの一覧表示を禁止する
Options -Indexes

# PHPのエラー表示をOFFにする
php_flag display_errors off
php_value error_reporting 0

# ===== キャッシュ設定 =====
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/webp  "access plus 1 year"
    ExpiresByType image/jpeg  "access plus 1 year"
    ExpiresByType image/png   "access plus 1 year"
    ExpiresByType text/css    "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
</IfModule>

# ===== gzip圧縮 =====
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/json
</IfModule>

5. データベースの移行手順

5.1 ローカルのDBを本番に移行する

データベース移行の手順:

① ローカルのDBをエクスポートする
   → phpMyAdmin を開く
   → 対象のデータベースを選択する
   → 「エクスポート」タブをクリックする
   → 形式:SQL
   → 「実行」をクリックする
   → .sql ファイルがダウンロードされる

② エクスポートしたSQLファイルを編集する
   → 開発環境のURLを本番URLに置換する

   例(テキストエディタで一括置換):
   http://localhost/mysite
   → https://www.example.com

③ 本番サーバーにデータベースを作成する
   → レンタルサーバーの管理画面でDBを作成する
   → DB名・ユーザー名・パスワードをメモする

④ 本番サーバーのphpMyAdminでインポートする
   → 「インポート」タブをクリックする
   → ②で編集した.sql ファイルを選択する
   → 「実行」をクリックする

⑤ 接続情報を本番用に変更する
   → config.php や wp-config.php を
     本番のDB情報に変更する

5.2 WordPressの移行(Search Replace DB)

WordPressの場合:
URL置換に「Search Replace DB」を使う方法

① Search Replace DB をダウンロードする
   → https://interconnectit.com/search-and-replace-for-wordpress-databases/

② ダウンロードしたファイルをサーバーにアップロードする
   (一時的なフォルダに入れる)

③ ブラウザでアクセスする
   → https://example.com/search-replace-db-master/

④ 置換設定をする
   → Search for:http://localhost/mysite
   → Replace with:https://www.example.com
   → 対象データベースを選択する

⑤ 「Live Run」をクリックする
   → URLが一括置換される

⑥ 使い終わったらSearch Replace DBのフォルダを削除する
   → セキュリティ上必ず削除する

⚠️ 本番のDBに対して実行するので
   必ずバックアップを取ってから実行する

6. 公開後の確認作業

6.1 公開直後に確認すること

本番公開後すぐに確認するチェックリスト:

□ サイトにアクセスできるか(URLを確認)
□ SSLが正しく動作しているか(鍵マークが表示されるか)
□ httpからhttpsへのリダイレクトが動作するか
□ wwwあり/なしのリダイレクトが動作するか

□ トップページが正しく表示されるか
□ 各ページにアクセスできるか
□ 画像がすべて表示されているか
□ CSSが正しく読み込まれているか
□ JavaScriptが正しく動作するか

□ お問い合わせフォームが動作するか
  → 実際にテスト送信して確認する
  → 管理者に通知メールが届くか
  → 自動返信メールが届くか

□ WordPressの場合:
  □ 管理画面にログインできるか
  □ パーマリンクを再設定する
    (管理画面→設定→パーマリンクを開いて保存するだけ)

□ Google Analyticsにデータが入ってきているか
□ Google Search Consoleでエラーがないか

6.2 パーミッションの確認

ファイル・フォルダのパーミッション設定:

ファイル(.php・.html・.css・.js):
→ 644(所有者:読み書き・グループ:読み・その他:読み)

ディレクトリ(フォルダ):
→ 755(所有者:読み書き実行・グループ:読み実行・その他:読み実行)

特別な設定:
wp-config.php(WordPress):
→ 600(所有者のみ読み書き)

アップロードフォルダ(uploads/):
→ 755(ファイルのアップロードを許可する場合)

FTPソフトでのパーミッション変更方法(FileZilla):
① ファイル・フォルダを右クリックする
② 「ファイルのパーミッション」を選択する
③ 数値を入力して「OK」をクリックする

⚠️ 777は絶対に設定しない
→ 誰でも書き込みできるので危険

7. トラブル対応

7.1 よくあるエラーと対処法

500 Internal Server Error:
→ .htaccessの書き方が間違っている
  → .htaccessを一時的にリネームして確認する
→ PHPのバージョンが合っていない
  → レンタルサーバーのPHPバージョンを確認する
→ ファイルのパーミッションが間違っている
  → 644(ファイル)・755(ディレクトリ)に設定する

404 Not Found:
→ ファイルがアップロードされていない
  → FTPで確認する
→ .htaccessのリライトルールが間違っている
  → WordPressの場合はパーマリンクを再保存する

データベース接続エラー:
→ DB接続情報(ホスト名・ユーザー名・パスワード・DB名)が
  開発環境のままになっている
  → config.php・wp-config.phpを確認する
→ データベースが作成されていない
  → レンタルサーバーの管理画面でDB作成を確認する

画像が表示されない:
→ ファイルのパスが絶対パスになっている
  → 相対パスに変更する
→ 画像ファイルがアップロードされていない
  → FTPで確認する
→ ファイル名が大文字小文字で食い違っている
  → Linuxサーバーは大文字小文字を区別する

メールが届かない:
→ サーバーのメール設定を確認する
→ PHPMailerを使っていない場合はSMTP設定を確認する
→ スパムフォルダを確認する

8. 実践チェックリスト

✓ 作業前に必ずバックアップ(ファイル+DB)を取っているか

✓ 開発環境と本番環境の設定ファイル(DB接続情報・パス)を切り替えているか

✓ .git/・node_modules/・.envなどの不要なファイルをアップロードしていないか

✓ .htaccess でHTTPSリダイレクト・ディレクトリ一覧表示禁止・エラー非表示を設定しているか

✓ ファイルのパーミッションが正しく設定されているか(ファイル:644・ディレクトリ:755)

✓ DBの移行後にURLを開発環境から本番環境に置換しているか

✓ 公開後にお問い合わせフォームへのテスト送信で通知メール・自動返信メールを確認しているか

✓ WordPressの場合は公開後にパーマリンクを再設定しているか

✓ Google AnalyticsとSearch Consoleの設定が完了しているか


まとめ

今回は納品前チェックリストと安全なサーバー移行・本番公開の手順を解説しました。ポイントをまとめると:

  • 本番公開前に「デザイン・コンテンツ・機能・パフォーマンス・セキュリティ」の5つの観点でチェックリストを使って確認漏れをゼロにする
  • 既存サイトがある場合は作業前に必ずファイルとデータベースの両方をバックアップする・バックアップなしで作業しない
  • node_modules/・.git/・.env・.DS_Storeなどの不要ファイルは本番サーバーにアップロードしない
  • .htaccessでHTTPSリダイレクト・ディレクトリ一覧表示禁止・エラー非表示・キャッシュ設定・gzip圧縮を設定する
  • ファイルのパーミッションはファイルが644・ディレクトリが755が基本で777は絶対に設定しない
  • DBを移行した後は開発環境のURLを本番URLに置換する・WordPressの場合はSearch Replace DBが便利
  • 公開直後はSSL・リダイレクト・フォーム送信・メール受信を実際にテストして確認する
  • WordPressの場合は公開後にパーマリンクの再設定を忘れずに行う・忘れると404エラーになる

次の記事では、クライアントへの納品・引き渡しの進め方を解説します。納品物のまとめ方・マニュアルの作り方・アフターサポートの設定まで丁寧にお届けします。お楽しみに!

コメント

タイトルとURLをコピーしました