Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@goro8

【5分で実践】LPリリースのFTP手動デプロイを脱・属人化【ドキュメント×シェルスクリプト】

Posted at

目次

  1. はじめに：なぜこの記事を書いたのか
  2. 当時の現場状況と課題
  3. 施策①：デプロイ手順の完全可視化
  4. 施策②：シェルスクリプトによる半自動化
  5. 実装の具体的な手順（今すぐ実践できる）
  6. 現場目線のよくある失敗と対策
  7. 周囲を巻き込むコツ
  8. まとめ

1. はじめに：なぜこの記事を書いたのか

FTP自動化の記事は世の中に溢れています。CI/CDパイプライン、Docker、GitHub Actionsなど、モダンな手法を解説する記事は山ほどあります。

でも、現場はそんなにスマートなことばかりじゃない。

私が関わったプロジェクトでは、LPリリースを担当する特定のメンバーだけがFTPソフトで手動デプロイしていました。「あの人がいないとリリースできない」状態。これが属人化です。

本記事では、技術的なハードルを上げず、今すぐ実践できる2つの施策をご紹介します。高度な技術力は不要です。大切なのは「チームの誰でもできる状態を作る」という視点です。

2. 当時の現場状況と課題

現場の状況

  • 月に3〜5本のLP制作・リリース
  • FTPソフト（FileZilla）での手動アップロード
  • リリース担当者は2名（実質1名がメイン）
  • デプロイ手順は口頭伝承とメモ書き

発生していた問題

  • 担当者が休暇や外出時にリリースが止まる
  • 新メンバーがジョインしても教える時間がない
  • ミスが起きても原因究明が困難（手順が不明確）
  • 「前回どうやったっけ?」と毎回確認が発生

目指したゴール

  • 誰でも5分あればリリースできる状態
  • ミスを減らし、安心してリリースできる環境
  • ナレッジの共有とチーム全体のスキルアップ

3. 施策①：デプロイ手順の完全可視化

なぜドキュメント化が最優先なのか

いきなり自動化ツールを導入しても、「何をしているのか分からない」状態では意味がありません。まずは手順の透明化が最優先です。

実施内容

Google ドキュメントで以下をまとめました：

  1. FTPソフトの起動方法

    • アプリケーションの場所（Macなら/Applications/FileZilla.appなど）
    • 初回起動時の注意点

  2. 接続設定の確認手順

    • サイトマネージャーの開き方
    • ホスト名、ユーザー名、パスワード、ポート番号の確認箇所
    • 画面キャプチャを貼付（赤枠で強調）

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

    • ローカルとリモートのディレクトリ構造
    • どのフォルダに何をアップロードするか（例：/public_html/lp/campaign2024/）
    • ドラッグ&ドロップの手順
    • アップロード完了の確認方法（ステータスバーのスクリーンショット）

  4. 動作確認のチェックリスト

    • ブラウザでのURL確認
    • スマホ表示の確認（レスポンシブ対応）
    • フォーム送信テスト（テストモードの場合）
    • 画像の表示確認

  5. トラブルシューティング

    • 「接続できない」場合の対処法
    • 「アップロードが途中で止まる」場合の対処法
    • 「ファイルが反映されない」場合のキャッシュクリア方法

ポイント：画面キャプチャの撮り方

良い例：

  • 必要な部分だけをトリミング
  • 赤枠や矢印で「ここを見て」を明示
  • 画像に番号を振る（①②③...）

悪い例：

  • 全画面スクリーンショット（情報が多すぎて分からない）
  • 文字が小さくて読めない
  • 何を示しているか不明確

共有方法

  • Google ドキュメントのリンクをSlackの専用チャンネルに固定投稿
  • 新メンバー入社時のオンボーディング資料に追加
  • 月1回の定例MTGで「更新があれば教えてください」と呼びかけ

4. 施策②：シェルスクリプトによる半自動化

目的

手順書は素晴らしいですが、毎回手作業は疲れます。そこでコマンド1つで完結するスクリプトを作成しました。

スクリプトが実行する処理

  1. ファイル圧縮（デプロイ前の最終版を保存）
  2. バックアップ作成（既存ファイルを日付付きでバックアップ）
  3. FTPアップロード（curlコマンドまたはlftp使用）
  4. 動作確認用URL表示（ターミナルに出力）

実装の具体例

以下は、実際に使用したシェルスクリプトのシンプル版です。

#!/bin/bash

# 設定
FTP_HOST="ftp.example.com"
FTP_USER="your_username"
FTP_PASS="your_password"
LOCAL_DIR="./dist"
REMOTE_DIR="/public_html/lp/campaign2024"
BACKUP_DIR="./backups"
DATE=$(date +%Y%m%d_%H%M%S)

echo "========================================="
echo "FTPデプロイスクリプト開始"
echo "========================================="

# 1. ローカルファイルを圧縮
echo "[1/4] ファイルを圧縮中..."
zip -r "${BACKUP_DIR}/deploy_${DATE}.zip" ${LOCAL_DIR}
echo "✅ 圧縮完了: ${BACKUP_DIR}/deploy_${DATE}.zip"

# 2. リモートのバックアップ作成（手動でFTP接続してコピー推奨）
echo "[2/4] リモートバックアップは手動で実施してください"
echo "    FTPソフトで ${REMOTE_DIR} を ${REMOTE_DIR}_backup_${DATE} にコピー"
read -p "バックアップ完了したらEnterを押してください..."

# 3. ファイルアップロード
echo "[3/4] ファイルをアップロード中..."
cd ${LOCAL_DIR}
for file in $(find . -type f); do
  curl -T "$file" --user "${FTP_USER}:${FTP_PASS}" "ftp://${FTP_HOST}${REMOTE_DIR}/${file}"
done
cd ..
echo "✅ アップロード完了"

# 4. 動作確認URL表示
echo "[4/4] 動作確認"
echo "========================================="
echo "以下のURLで動作確認してください："
echo "https://example.com/lp/campaign2024/"
echo "========================================="
echo "デプロイ完了！"

使い方

  1. スクリプトをdeploy.shとして保存
  2. 実行権限を付与：chmod +x deploy.sh
  3. 実行：./deploy.sh

なぜ「半自動化」なのか

完全自動化せず、リモートバックアップは手動にしています。理由は以下の通り：

  • 初心者が「何が起きているか」を理解できる
  • 万が一のミスを防ぐ（人間の目視確認を挟む）
  • FTPサーバーによってはコマンドラインでのディレクトリ操作が制限される

技術より安全性とチームの理解を優先しました。

5. 実装の具体的な手順（今すぐ実践できる）

ステップ1：現状の手順を書き出す（10分）

まず、今あなたがやっている手順をテキストエディタに箇条書きしてください。

例：

1. FileZilla起動
2. サイトマネージャー開く
3. example.comに接続
4. /public_html/lp/に移動
5. distフォルダの中身をアップロード
6. ブラウザで確認

ステップ2：スクリーンショットを撮る（15分）

手順を実際に実行しながら、各ステップの画面を撮影します。

macOSの場合：

  • Command + Shift + 4で範囲指定スクリーンショット
  • Skitchなどのツールで赤枠や矢印を追加

Windowsの場合：

  • Windows + Shift + Sでスクリーンショット
  • ペイントやSnipping Toolで編集

ステップ3：Google ドキュメントにまとめる（20分）

  1. 新規ドキュメント作成
  2. タイトル：「LPデプロイ手順書（FTP）」
  3. 目次を作成（Googleドキュメントの機能で自動生成可能）
  4. 各手順に番号と見出しを付ける
  5. スクリーンショットを挿入（画像は適切なサイズに調整）
  6. 共有設定を「リンクを知っている全員が閲覧可」に変更

ステップ4：シェルスクリプトを作成（30分）

上記のサンプルコードをコピーして、以下を自分の環境に合わせて変更：

  • FTP_HOST：FTPサーバーのホスト名
  • FTP_USER：FTPユーザー名
  • FTP_PASS：FTPパスワード（セキュリティ注意、後述）
  • LOCAL_DIR：アップロードするローカルディレクトリ
  • REMOTE_DIR：アップロード先のリモートディレクトリ

ステップ5：テスト実行（10分）

必ず本番環境ではなく、テスト環境で試してください。

  1. スクリプトを実行
  2. 各ステップで出力されるメッセージを確認
  3. 最終的にブラウザでURLを開いて動作確認

ステップ6：チームに共有（5分）

  • Slackで「デプロイ手順書とスクリプト作りました!」と投稿
  • ドキュメントとスクリプトのリンクを共有
  • 「フィードバックください」と呼びかけ

所要時間合計：約90分

6. 現場目線のよくある失敗と対策

失敗①：パスワードをスクリプトにベタ書き

問題点：

  • GitHubにpushすると全世界に公開される可能性
  • セキュリティリスク大

対策：
環境変数を使う、または別ファイルに分離。

# .envファイルに保存
FTP_USER="your_username"
FTP_PASS="your_password"

# deploy.shで読み込み
source .env

.gitignoreに.envを追加することを忘れずに。

失敗②：バックアップを取らずに上書き

問題点：

  • ミスしたら元に戻せない
  • 「前のバージョンどこ?」と慌てる

対策：
スクリプト実行前に必ずバックアップを作成。日付付きフォルダで管理。

BACKUP_DIR="./backups/$(date +%Y%m%d_%H%M%S)"
mkdir -p ${BACKUP_DIR}
cp -r ${REMOTE_DIR} ${BACKUP_DIR}

失敗③：ドキュメントが古くなる

問題点：

  • 手順が変わっても更新されない
  • 「これ、もう使えないじゃん」となる

対策：

  • ドキュメントの先頭に「最終更新日」を記載
  • 月1回のレビュー日を設定
  • 誰でも編集可能な状態にして「気づいた人が直す文化」を作る

失敗④：スクリプトが途中で止まる

問題点：

  • ネットワークエラーでアップロード中断
  • 「どこまで進んだか分からない」

対策：
各ステップで進捗を表示し、ログファイルに記録。

echo "[1/4] ファイル圧縮中..." | tee -a deploy.log

失敗⑤：一人で完結させようとする

問題点：

  • 「自分だけが使えればいい」と思ってしまう
  • 結局属人化が解消されない

対策：

  • 作成段階からチームメンバーに声をかける
  • 「これで合ってますか?」とレビューを依頼
  • 実際に他のメンバーに使ってもらってフィードバックをもらう

7. 周囲を巻き込むコツ

コツ①：完璧を目指さない

「80点でいいから、まず形にする」精神が大事です。完璧主義は周囲を遠ざけます。

NG：
「完成するまで誰にも見せない」

OK：
「ここまで作ったんですが、どう思いますか?」

コツ②：メリットを明確にする

「何が嬉しいのか」を具体的に伝えます。

例：

  • 「これで○○さんが休んでもリリースできます」
  • 「新人の△△さんでも5分でデプロイできるようになります」
  • 「ミスが減って、やり直しの時間が削減できます」

コツ③：小さく始めて反応を見る

いきなり全部を変えようとせず、まずは1つのLPで試します。

ステップ例：

  1. 次回のLPリリースで手順書を使ってもらう
  2. フィードバックをもらって改善
  3. スクリプトを導入（任意使用）
  4. 徐々に全LPに展開

コツ④：感謝を伝える

協力してくれた人には必ずお礼を言います。Slackで公開感謝も効果的。

例：
「○○さんにレビューしてもらって、手順書がすごく分かりやすくなりました!ありがとうございます!」

コツ⑤：定期的に振り返る

月1回のミーティングで「このドキュメント、まだ使えてますか?」と確認。

振り返りポイント：

  • 実際に使った人の感想
  • つまずいた箇所
  • 追加してほしい情報
  • 不要になった情報

8. まとめ

この記事で紹介した2つの施策

  1. デプロイ手順の完全可視化

    • Google ドキュメントで画面キャプチャ付き手順書作成
    • 誰でも・いつでも・迷わずにリリースできる状態を実現

  2. シェルスクリプトによる半自動化

    • コマンド1つで圧縮・バックアップ・アップロード・確認を実行
    • 完全自動化ではなく、安全性と理解を優先した「半自動化」

技術力は高くなくていい

この記事の施策に必要なのは、高度な技術力ではありません。

  • ドキュメント作成能力（伝える力）
  • 基本的なシェルスクリプトの知識（コピペでOK）
  • チームを巻き込む姿勢（コミュニケーション力）

属人化解消のゴールは「誰でもできる」

「あの人がいないとできない」状態から脱却することが、チーム全体の生産性向上につながります。

今日から実践できること

  1. 現在の手順を10分で箇条書きにする
  2. 明日、スクリーンショットを撮りながら作業する
  3. 週末、Google ドキュメントにまとめる
  4. 来週、チームに共有してフィードバックをもらう

この記事を読んだあなたなら、5分後から動き出せます。

参考リンク

最後まで読んでいただき、ありがとうございました!
フィードバックやご質問があれば、コメント欄でお気軽にどうぞ。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?