Dreamweaverのサーバー設定についてお探しですね。

広告

Dreamweaverでサーバーに接続する方法を分かりやすく解説

Dreamweaverで作ったWebサイトを公開するには、自分のパソコンだけでなく、インターネット上のサーバーに接続する必要があります。

でも、FTP設定を間違えると「ファイルがアップロードできない」「画像が表示されない」「PHPが動かない」といった問題が起きてしまいます。

この記事では、Dreamweaverでサーバーに接続する方法を、初めての人にも分かりやすく説明していきます。

1. リモートサーバーとテストサーバーって何が違うの?

Dreamweaverには「リモートサーバー」と「テストサーバー」という2つの設定があります。

最初にこの違いを理解しておくと、後の作業がスムーズに進みます。

**リモートサーバー**は、完成したWebサイトを実際に公開するためのサーバーです。

HTML、CSS、画像、JavaScriptなどのファイルをアップロードして、世界中の人に見てもらえる状態にします。

レンタルサーバーや会社のWebサーバーがこれに当たります。

FTPやSFTPという方法で接続するのが一般的です。

一方、**テストサーバー**は、公開する前に「ちゃんと動くかな?」と確認するための場所です。

普通のHTMLサイトならブラウザで見るだけでも確認できますが、PHPを使ったページやデータベースと連携するサイト、WordPressのようなシステムは、サーバー上で動かさないと正しく確認できません。

Dreamweaverでは、同じサーバーを公開用と確認用の両方に使うこともできますし、別々に設定することもできます。

ここで大事なのは、「どこにファイルをアップロードするか」と「どこで動作確認するか」をはっきりさせることです。

例えば、すでに公開中のサイトに直接アップロードすると、作業途中のページが見られてしまう可能性があります。

だから実際の仕事では、本番用とは別にテスト用のフォルダやサブドメインを用意してから設定する方が安全です。

FTPの接続情報は、レンタルサーバーの管理画面で確認できます。

必要になるのは、FTPホスト名、ユーザー名、パスワード、接続先のフォルダ、WebのURLなどです。

サーバー会社によって表記が少し違うこともあるので、設定する前にメモしておくと迷わずに済みます。

2. Dreamweaverでサイト設定をしてFTP情報を入力しよう

Dreamweaverでサーバーに接続するには、まず「サイト定義」というものを作ります。

これは、自分のパソコンの作業フォルダと、サーバー上の公開場所をつなげるための設定です。

Dreamweaverを開いたら、上のメニューから「サイト」→「新規サイト」または「サイトの管理」を選んで、新しいサイトを作るか既存のサイトを編集します。

ここでサイト名と、パソコン上の作業フォルダを指定します。

作業フォルダには、制作中のHTMLファイルや画像、CSS、JavaScriptなどが入っているフォルダを選びます。

ここを間違えると、Dreamweaverでファイル一覧がうまく表示されなかったり、アップロードするファイルがずれたりします。

既存のサイトなら、index.htmlが入っている階層を基準にすると分かりやすいです。

次に、左側のメニューから「サーバー」を選んで、「＋」ボタンで新しいサーバー設定を追加します。

接続方法は、普通のFTP接続なら「FTP」を選びます。

サーバーによっては、より安全な「SFTP」や「FTPS」が推奨されていることもあるので、レンタルサーバーの案内を確認してください。

普通のFTPは通信内容が暗号化されないので、できればSFTPかFTPSを使う方が安心です。

入力する主な項目はこんな感じです。

– **サーバー名**：Dreamweaver上で識別するための名前(自由に決めてOK)
– **FTPアドレス**：サーバー会社から教えられたホスト名
– **ユーザー名・パスワード**：FTP接続用のログイン情報
– **ルートディレクトリ**：サーバー上でファイルを置く場所のパス
– **Web URL**：ブラウザで見るときのアドレス

特に間違えやすいのが「ルートディレクトリ」と「Web URL」です。

ルートディレクトリは、サーバー上のどこにファイルをアップロードするかを指定します。

レンタルサーバーでは「public_html」「www」「htdocs」などが公開用のフォルダになっていることが多いです。

Web URLには、そのフォルダをブラウザで開いたときのアドレスを入力します。

ここがずれていると、アップロードはできているのにブラウザで正しく表示されない、という状態になりやすいので注意が必要です。

3. 接続テストとアップロードの確認をしよう

FTP情報を入力したら、Dreamweaverのサーバー設定画面にある「テスト」ボタンを押して、ちゃんと接続できるか確認します。

接続に成功すれば、Dreamweaverからサーバーにアクセスできる状態です。

失敗したら、ホスト名、ユーザー名、パスワード、ポート番号、接続方式、ルートディレクトリのどれかが間違っている可能性があります。

特にパスワードをコピーしたときに余分なスペースが入っていないか、FTPアカウントがちゃんと有効になっているかを確認してみてください。

接続できたら、サーバー設定の使い道を指定します。

Dreamweaverのサーバー一覧では、登録したサーバーに「リモート」や「テスト」というチェックを付けられます。

公開用として使うなら「リモート」にチェックを入れて、動的なページの確認にも使うなら「テスト」にもチェックを入れます。

公開用と確認用を分けたい場合は、サーバー設定を2つ作って、片方をリモートサーバー、もう片方をテストサーバーにすると管理しやすくなります。

ファイルをアップロードするには、Dreamweaverのファイルパネルで対象のファイルを選んで、「PUT」または上向き矢印のボタンを押します。

逆に、サーバー上のファイルを自分のパソコンに取り込む操作は「GET」です。

複数人で作業しているときは、サーバーの最新版を取得せずに自分のファイルをアップロードすると、他の人の変更を上書きしてしまう恐れがあります。

作業前にGETで最新状態を確認して、作業後にPUTでアップロードする流れを意識すると安全です。

Dreamweaverには保存時に自動でアップロードする設定もありますが、慣れないうちは慎重に使った方がいいです。

便利な反面、未完成のファイルや確認前の変更がサーバーに送られてしまうことがあります。

特に本番サイトに直接つないでいる場合は、手動でアップロードして、変更内容を確認してから送信する方がトラブルを防げます。

アップロードしたら、必ずブラウザで実際のURLを開いて、ページが思った通りに表示されるか確認しましょう。

Dreamweaver内のプレビューだけでは、サーバー上でのパス指定やPHPの実行結果まで完全には確認できません。

CSSが反映されない、画像が出ない、リンク先が404エラーになる、といった問題は、自分のパソコンでは気づきにくいので、サーバー上での表示確認を習慣にすることが大切です。

4. テストサーバーに接続できないときのチェックポイント

Dreamweaverでテストサーバーに接続できないときは、原因が「FTP接続そのものの問題」か「サーバー上の実行環境の問題」かに分かれます。

FTP接続自体が失敗している場合は、まず接続情報をもう一度確認します。

サーバーによってはFTPの接続先と管理画面のログインIDが違うことがあるので、契約時のメールやサーバーパネルに書かれたFTP専用の情報を使う必要があります。

次に確認したいのが、ポート番号と接続方式です。

普通のFTPはポート21、SFTPはポート22を使うことが多いですが、サーバー会社によって違う場合があります。

また、会社や学校のネットワークではFTP通信が制限されていることもあります。

そういうときは別のネットワークで試す、SFTPに切り替える、サーバー会社の推奨設定を確認する、といった対応が必要です。

テストサーバーとして動かない場合は、PHPやデータベースなどの実行環境が整っているかを確認します。

例えばPHPファイルをテストしたいのに、アップロード先がPHPに対応していないサーバーだったら、Dreamweaverの設定が正しくてもページは期待通りに動きません。

WordPressを使う場合は、MySQLなどのデータベース設定、ドメインやサブディレクトリのURL、パーマリンク設定なども関係してきます。

よくあるトラブルと確認するポイントをまとめると、こんな感じです。

– **接続テストに失敗する**：FTPホスト名、ユーザー名、パスワード、ポート番号を確認
– **アップロードできるけど表示されない**：ルートディレクトリとWeb URLの対応を確認
– **画像やCSSが反映されない**：相対パス、ファイル名の大文字小文字、アップロード漏れを確認
– **PHPが動かない**：サーバーがPHPに対応しているか、拡張子が正しいかを確認
– **本番サイトに反映されてしまう**：テスト用のフォルダやサブドメインを別に設定

また、Dreamweaver側のキャッシュやブラウザのキャッシュが原因で、変更内容が反映されていないように見えることもあります。

アップロード後に表示が変わらない場合は、ブラウザのスーパーリロード(Ctrl+Shift+Rなど)をする、別のブラウザで確認する、ファイルの更新日時を確認するなどの方法が効果的です。

CSSやJavaScriptは特にキャッシュの影響を受けやすいので、修正直後は注意が必要です。

最終的には、Dreamweaverの設定画面だけで解決しようとせず、サーバーの管理画面、FTPアカウント情報、ブラウザでの表示、ファイル構成を照らし合わせて確認することが大切です。

リモートサーバーとテストサーバーの役割をきちんと分けて、ルートディレクトリとWeb URLを正しく対応させれば、Dreamweaverからのアップロードや動作確認はスムーズに進みます。

公開前のチェック環境をしっかり整えておくことで、間違って公開してしまったり表示が崩れたりするのを防げて、安心してWebサイトを更新できるようになります。

広告