下記の記事の続きです。

ローカルとサーバーの接続方法についてみていきます。

ローカルとサーバーの接続

上記で確認したローカルとサーバーのディレクトリを接続していきます。

各レンタルサーバーの FTP ソフトの設定方法は下記を参考にしてください。

• 各種FTPソフトの設定方法 | LOLIPOP! レンタルサーバー
• ファイル転送ソフトを設定したい（ライト・スタンダード・プレミアム）| SAKURA internet
• FTPソフトの設定 | StarServer

Cyberduck

FTPS 接続を行うには左上の新規接続から下記の設定を行います。

Path: の部分にサーバーのルートから先のパスを入れることでそのディレクトリをルートとして接続します。

Cyberduck は D&D でGET / PUT を行います。
完全手動のソフトウェアのため、ローカルの設定項目はありません。
Windows エクスプローラーでローカルのディレクトリを開いて D&D を行ってください。

Connect Mode

FTP 接続にはアクティブとパッシブの 2種類の方法があり、パッシブを利用するのが一般的です。
Cyberduck の場合、システム環境設定をデフォルトの値にしています。
調べるのが面倒なので私はパッシブに変更して接続しています。

• FTPにおけるアクティブモードとパッシブモードの違い | CentOS サーバー構築入門
• FTP & FTP-TLS | Cyberduck

Dreamweaver

※ GET/PUT を行う前に後述する除外ファイル/ディレクトリの設定を行ってください。

下記の設定で接続できます。
開いているディレクトリとルートディレクトリの階層を合わせてください。

例えば Dreamweaver でローカルの public を開いていてサーバーのディレクトリ構造のが画像の構成の場合は ルートディレクトリに /wordpress、ローカルで themes を開いている場合はルートディレクトリに /wordpress/wp-content/themesを入力します。

具体的な接続方法は参考サイトを紹介しておきます。

• Publishing server への接続 | Adobe
• Dreamweaver の FTP 接続の設定をする | Adobe

暗号化の種類

「使用する接続」の項目は「 FTP over SSL/TLS（明示的な暗号化）」を使用するのが一般的です。
FTP over SSL/TLS（暗黙的な暗号化）と違いは下記を参考にしてください。

※ ロリポップは 暗黙的な暗号化に対応していません。サーバーによって選択肢が限られる場合があります。

• Publishing server への接続 | Adobe
• [PHP]FTPS接続：暗号化モード(Explicit/Implicit)による実装方法の違い | Qiita
• Win FFFTP（FTPS対応版）の設定 | LOLYPOP! レンタルサーバー

Cyberduck はソフトウェア側で暗黙的な暗号化をサポートしていません。

• FTP & FTP-TLS | Cyberduck

Visual Studio Code

※ GET/PUT を行う前に後述する除外ファイル/ディレクトリの設定を行ってください。

VS Code は SFTP というプラグインを使用し、json ファイルで接続の設定を行います。
SFTP という名前ですが FTP / FTPS / SFTP に対応しています。

長文になるので参考サイトを置いておきます。

• VSCodeでファイルをアップロードできる機能拡張「SFTP」 | なかしまぁ先生
• vscodeのsftp機能をより理解する | @pooo_ta(Shota Yuasa)
• FTP(s) な時の VSCode 拡張 SFTP の設定方法、他 | bissy
• VSCodeにFTPSの設定を行なう方法（エックスサーバー）| PC問題解決！

"remotePath"でサーバー側のルートディレクトリを指定します。

画像の wordpress のディレクトリをルートにしたい場合は
"remotePath": "wordpress",と記載します。

{
    "host": "hoge",
    "protocol": "ftp",
    "secure": true,
    "port": 21,
    "username": "huga",
    "password": "piyo",
    "remotePath": "/wordpress",
    "uploadOnSave": false,
    "ignore": [".vscode", ".git", ".DS_Store"]
}

除外ファイル / ディレクトリの設定

WordPress を開発するにあたり、GET / PUT してはいけないファイルやディレクトリがあります。
これをアプリケーション側で行わないように設定できます。
まずはアプリケーションごとの除外設定の方法についてみていきます。

Cyberduck

Cyberduck は手動で GET / PUT を行うアプリケーションです。
そのためファイルやディレクトリの除外設定はありません。

私は可能な限り Cyberduck を利用した開発環境を選択していません。
手動で GET / PUT を行うため誤操作が起きる可能性があるためです。

Cyberduck を利用する際はお気を付けください。

Dreamweaver

Dreamweaber はクロークという機能を使って除外設定を行います。

クロークはファイルにもディレクトリにも設定可能で、ディレクトリに設定した場合はディレクトリの下層にあるファイルやディレクトリがすべて除外対象になります。

Visual Studio Code

VS Code はignoreキーで設定します。

{
    "host": "hoge",
    "protocol": "ftp",
    "secure": true,
    "port": 21,
    "username": "huga",
    "password": "piyo",
    "remotePath": "/wordpress",
    "uploadOnSave": false,
    "ignore": [".vscode", ".git", ".DS_Store", "wp-config.php"]
}

上記のコードは .vscode、.git、.DS_Store、wp-config.php を除外対象にしています。
ディレクトリやファイルのほか、仮想にあるものもパスを指定することで設定できます。

絶対に GET / PUT してはいけないもの

では、Wordpress 開発で GET / PUT してはいけないものを紹介していきます。
下記の項目を上記の方法で除外していきます。

wp-config.php

まずは WordPress のルートディレクトリ直下にある wp-condig.php。

これはデータベースへアクセスするための設定が書かれています。
データベースにアクセスするには下記の項目が必要です。

・データベースの名前 (DB_NAME)
・データベースのユーザー名 (DB_USER)
・データベースのパスワード (DB_PASSWORD)
・データベースのホスト (DB_HOST)
・データベーステーブルのプレフィックス ($table_prefix)

これらを設定しているのが wp-config.php です。

今回構築した環境はサーバーとローカルでデータベースが違います。
例えばローカルの WordPress からサーバーのデータベースへはアクセス許可がありません。
そのため、wp-config.php を誤って GET / PUT してしまった場合にデータベースへのアクセス時にエラーが発生し、所謂「ようこそ画面」が表示されてサイトが閲覧不可能な状態になります。

対策方法は wp-content.php を上書きしないことで、
最も確実な対処方法がアプリケーション側で GET / PUT を禁止しておくことです。

それと、念のためバックアップも取っておくことをお勧めします。誤操作で上書きしてしまってもバックアップファイルで上書きしなおせば（たぶん）元に戻ります。
（私は上書きしたことがないのでこれで戻るのかは検証していません。）

それでも wp-config.php を上書きしてしまったら

下記を試してみましょう。

• WordPressへようこそ。作業を始める前にデータベースに関するいくつかの 情報が必要となります。以下の項目を準備してください。 | コトダマウェブ

戻せるとはいえ上書きする度にようこそ画面がでるので、上書きしないに越したことはないです。

.vscode

.vscode は Visual Studio Code で FTP / SFTP / FTPS 接続を行った際にルートの直下に作られます。
Cyberduck や Dreamweaver でサーバーに接続する際は作られません。

このディレクトリの中に作成する sftp.json にサーバーへアクセスための情報が詰まっています。
この情報があれば誰でもサーバーにアクセスしてデータを改ざんできるようになってしまいます。

必ずサーバーに上げないようにしましょう。
VS Code でサーバーに接続する際は ignore キーに .vscode を入れるようにしてください。

{
    "host": "hoge",
    "protocol": "ftp",
    "secure": true,
    "port": 21,
    "username": "huga",
    "password": "piyo",
    "remotePath": "/wordpress",
    "uploadOnSave": false,
    "ignore": [".vscode", ".git", ".DS_Store", "wp-config.php"]
}

一応ロリポップのように対策を打ってくれているサーバーもあります。

• VSCodeご利用のお客様へ | LOLYPOP! レンタルサーバー

.git

.git は Git を利用する際に作られるディレクトリです。
リポジトリの情報がこの中に格納されていきます。

この .git に上記の sftp.json の情報が入りますので、これも除外する必要があります。
それでなくともこの中のデータは GitHub に送れるため、わざわざレンタルしているサーバーに上げる必要がありません。

サーバーの容量節約のためにも除外リストに登録しておきましょう

• .gitディレクトリの中身を見てみる👀 | tatane616(tatane)

Git の連携

だいぶ端折りますが下記のコードでローカルとリモートを接続できます。
ローカルのルートで行ってください。

git init

git remote add origin https://github.com/<リポジトリ>

git push --set-upstream origin main

ここからは普段通りコミットやプッシュができるようになります。