こんにちは。もとちかです（詳細プロフィールはこちら）。
今回の記事では以前ローカル環境でwebサイトを構築した後、本番サーバーに移行（いわゆるドメインをとってサイトを世に出したということ）したのですが、その時に、ある程度悩んだポイントや、わかりづらいポイント、または、時間効率を高める方法など、色々と発見を気づきがありましたので、備忘録もかねて記事にしたいと思います。
調べてみると、やはり本番サーバーに移行する時に色んな悩みの記事があったり、何回やっても本番サーバーに移行できないなどの声もあるようなので、出来るだけ、どのフェーズでどういったバグに出会い、どういった解決方法があるのか、ということをお伝えしようと思います。
ちなみに私が初めてローカルサーバーから本番サーバーに移行する時に５日間もかかりました。
できるようになると１時間ほどで出来るようになるんですが、私の場合、ある一部分で３日ほど悩み、検索し続けていたので相当な時間がかかってしまいました。
この読者の方は、そういったことがないよう、初めてでも数時間でできるように説明をしていきたいと思います。
ローカルサーバーから本番サーバーにサイト移行する方法
それではローカルサーバーから本番サーバーにサイト移行する方法を解説していきます。
大まかな流れ
最初に流れを説明しておきます。
１、ローカル環境のファイルをバックアップ（ファイルをコピーしておくこと）
２、ドメイン取得
３、サーバー契約
４、ドメインとサーバーの紐付け→DNS（サーバーの番号みたいなもの）を紐付け
５、本番サーバーでデータベース（以下DB）を作り、ユーザー追加をする
６、本番サーバーのDB情報、ユーザー情報、ホスト名、ユーザーパスワードをメモする
７、ローカル環境ファイルのconfig.phpを本番サーバーのDB用に書き換える
８、ローカル環境のphpmyadminをエクスポート（ファイル化すること）
９、ローカル環境のDBを本番サーバードメイン名に置換する
１０、本番サーバーのphpmyadminのDBにログインし、ローカル環境のDBをインポート（９でエクスポートしたファイルを読み込ませる）
１１、FTPソフトでファイルをローカルから本番サーバーに移行する
１２、.htaccessを編集
１３、「サイトURL/wp-admin」にログインして移行されているか確認
今回使用したローカル環境構築ツール
今回使ったツールやサーバーをご紹介します。
出来る限り他のツールでも使えるような説明を踏まえていきますが、サーバーやFTPツールによっては多少違うところがあるので、ご了承ください。
今回は使ったローカルサーバーは「MAMP」です。象のマークでお馴染みにツールです。
■概要
https://www.ossnews.jp/oss_info/MAMP
MAMP(マンプ)とは、macOSまたはWindows上で動作するWebデベロッパー向けのツールで、ローカルサーバ環境一式をインストールできます。
■基本説明
MAMPは、オープンソースソフトウェアで構成されるソリューションスタックで、個人的Webサーバをセットアップするためのワンクリックソリューションです。数回クリックするだけでWeb開発環境をインストールできます。
macOSまたはWindowsを実行しているコンピュータ上で動的Webサイトを実行するために利用できます。独立したPC上で、別のWebサーバを必要とせずに、Web開発環境を構築できます。
MAMPでは初心者でも非常に簡単にローカルサーバーを構築できるので、とても便利です。あまりサーバーのことを知らなくても数クリックでローカル環境が作れてしまうのでおすすめです。
MAMPのサイトはこちらから→https://www.mamp.info/en/
こちらでローカル環境（簡単に言えば自分のパソコンの中だけでサーバーを作り、webサイト開発ができるもの）を作り、webサイトのデモサイトのようなものを作っていきます。
今回使用したFTPソフト
FTPソフトは今回「FileZilla」を使いました。画面も見やすく初心者の方でも取り扱いしやすいです。
FTPツールとはローカル環境のサイトを本番サーバーに移行したり、またはその逆をするために使うソフトです。
ローカル環境でwebサイトを作りあげ、デザインやコーディングをしたものをこのFTPツールで本番サーバーに移動させることによって初めて作ったサイトが世の中に送り出されるわけです。
今回使用した本番サーバー
おそらくレンタルサーバーの中では最も有名な「Xserver」を使いました。
レンタルサーバーの中では安い方ではありませんが、容量も大きく、サポートやクオリティが整っています。
初めてやる人にとっては有名なサーバーなのでネット上に情報がたくさん落ちています。ですので、何かトラブルがあっても解決しやすいです。
余談ですが、初心者の方にとっては値段よりも有名で、ユーザーの多いツールや商品を使うことをお勧めします。プログラミングの仕事自体は調べることも大きな仕事の一つです。
その時にユーザーが多いツールであればネット上にたくさんの情報がありふれているので、大抵解決できます。
話は戻しますが、Xserverさんに問い合わせたことがあるのですが、返信が早く、丁寧に詳しく説明してくださいましたので、信頼できるサーバーですね。
ローカルサーバーから本番サーバーにサイト移行する手順の詳細の説明
それではここから先述した大まかな流れに沿って解説していきます。
１、ローカル環境のファイルをバックアップ（ファイルをコピーしておくこと）
まずはじめはバックアップを取りましょう。これから写そうとしているディレクトリやファイルはコピーしておきましょう。ということです。
後々、システムを司っているファイルなどもいじっていくので、何かあった時にやり直しができるようにまずはバックアップをしっかりしておきましょう。
２、ドメイン取得
次に、自分のサイトを世に送り出すためにドメインというものを取得します。
世の中のデータが入っている箱をサーバーと言います。
わかりやすくいうと、日本で言うところの都道府県みたいなものです。
仮に東京都と言うサーバーを借りてその中のどこに住むのか。その住所となるものがドメインです。
東京都（今回で言うXserverのサーバー）と言うサーバーの中の世田谷区〜と言う住所がドメインと言うことになります。
ドメインというのはサイトごとに「◯〇〇.com」や「〇〇◯.net」などのようなURLがドメインの名前になります。
まずはこのドメインを取得するということをするわけです。
私は今回「お名前.com」を使いました。ドメイン代としては年間１０００円くらいなので、めちゃくちゃ安いです。
こんな感じのトップ画面なので、あとは自分のつけたいドメインを入れて、そのドメインが使えるかを検索して決済するだけでドメインを取得することができます。
とても楽チンです。
会員IDとパスワードはメモ帳などにしっかり記録しておいてください。とても重要なものです。忘れないようにしましょう。
３、サーバー契約
次に先ほどいった「都道府県」に値するデータを入れておく箱であるサーバーを借ります。これがいわゆる本番サーバーというものになります。
先ほど、お伝えしたように今回は「Xserver」を使いました。私が使っているXserverのサーバープランとしてはX10プランというものです。安くてそこそこの容量を持ったプランになります。
こちらだと年間１５０００円くらいなので、少し高いと思われるかもしれませんが、コスパの良いサーバーだと思います。
何より安心して使えることが仕事をする上では大事ですからね。
Xserverでは１０日間の無料お試しもできるので、初めての方でも安心ですね。
サイトトップ画面の赤丸の部分からお申し込みできます。
その後はお客様情報を入力する画面になるので、記入欄を入力していくだけです。
赤丸の部分だけ、初心者だとわからないという方もいるかもしれないので、説明しておくと、この欄には取得したドメイン名を入れれば大丈夫です。
「〇〇◯.com」や「〇〇◯.net」のようなものです。
ドメインの時もそうでしたが、サーバーにもIDやパスワードが存在します。Xserverの場合
会員IDとそのパスワードが一つのセット。
サーバーIDとそのパスワードが一つのセット。
のように２つ存在します。パスワードもそれぞれ別のものにもできます。
ですので、どっちがどっちなのかわからなくなる可能性が高いので、これもしっかりとメモ帳などに記録しておくことをオススメします。
４、ドメインとサーバーの紐付け→DNS（サーバーの番号みたいなもの）を紐付け
その次にドメインとサーバーを結びつける作業に入ります。
要は日本で言うと、東京都内に勝手に住み着いてはダメで、住むのであればちゃんと住所登録してくださいね。ということになるのと同じだと思っていいです。
ドメインを取得したら、サーバーに私はここですということを伝え、お互いが理解するためにネームサーバーというものをつけてあげることによって、サーバーとドメインが紐づけられます。
手順としては以下です。
１、サーバーのサーバーパネルにログイン。
ログインすると以下のような画面になるので
右上のドメイン設定をクリックします。
２、ドメインの追加
ドメインの追加というところから、取得したドメインを入力し、サーバにドメインを追加しておきます。このままではまだ、ドメインとサーバーは紐づいていません。
３、ドメインサイトにアクセスし（今回の場合は「お名前.com」）ログインした後、ドメイン一覧など、取得したドメインが乗っているページに行き、取得したドメインのネームサーバーを変更するという作業をします。
「お名前.com」ではログインした後、「ドメイン一覧」というボタンを押すと、次の画面に行きます。
この画面で使いたいドメインをクリックすると、ネームサーバーという欄があるので、「変更する」というボタンを押してネームサーバーを入力します。
ネームサーバーの情報を確認するには、サーバーのサーバーパネルにログインし、サーバー情報というボタンをクリックすると、表示されます。
Xserverだとこのような画面です。
このネームサーバー１〜５をドメインサイトの方に打ち込みます。
これでサーバーとドメインは紐付けできました。
５、本番サーバーでデータベース（以下DB）を作り、ユーザー追加をする
ここまでで、ドメインとサーバーは準備できました。ここからはいよいよ移行する作業に入っていきます。
まずは本番サーバー（今回はXserver）でデータベースを作ります。
「データベース」とは、ある特定の条件に当てはまる「データ」を複数集めて、後で使いやすい形に整理した情報のかたまりのことを表します。特にコンピュータ上で管理するデータをデータベースと呼ぶことが多いですが、紙の上で管理する「電話帳」や「住所録」なども、立派なデータベースです。
https://proengineer.internous.co.jp/content/columnfeature/6411
また、コンピュータ上でデータベースを管理するシステム（DBMS：Database Management System）のことや、そのシステム上で扱うデータ群のことを、単に「データベース」と呼ぶ場合もあります。
よくわからないかもしれませんが、サイトの中には膨大なデータがあります。例えばブログを書いたらその記事１つ１つがデータとして残ります。それを保存して見やすく管理できるものといった感じです。
それではデータベースの作り方です。
まずはXserverのサーバーパネルにログインします。
その後の手順としては以下です。
１、MySQL設定をクリック
２、MySQLの追加
わかりやすいデーターベース名をつけて追加する。
＊文字コードはデフォルトのUTF-8のままでいいです。
３、MySQLユーザーの追加
データベースを使うユーザーIDを追加します
＊ユーザーIDもわかりやすいものにしましょう。パスワードはあとで使うので、メモしておいてください。
４、MySQLアクセス権の設定
「MySQL一覧」を押すと、「データベース」と「アクセス権未所有ユーザ」の中に先ほど登録したものがあると思います。そのデータベースにアクセス権未所有ユーザから登録した「ユーザID」を追加します。
これでデータベースができ、データベースのユーザーを登録することができました。
６、本番サーバーのDB情報、ユーザー情報、ホスト名、ユーザーパスワードをメモする
ここでメモ帳に控えておいて欲しいものがあります。
それが以下です
- データベース名
- ユーザー名
- ユーザーパスワード
- ホスト名
＊ホスト名は「MySQL一覧」の下部の方書いてあります。
ここは結構重要なところなので、しっかりとメモして忘れないようにいう意味でわざわざこのフェーズを入れました。
７、ローカル環境ファイルのconfig.phpを本番サーバーのDB用に書き換える
ここまでで、初心者にとっては全くわからないけど、なんとなく書いてある通りに進めてきたという人もいるでしょう。
ですが、ここからも重要なことだらけです。ということでホッと一息ついてから読み進めてください。
それでは７番目のフェーズです。
バックアップしたローカル環境ファイルをいじっていきます。
ローカル環境のconfig.phpを開いて変えていきます。
ちなみにローカル環境のファイルの場所は以下です。（今回の場合はMacでMAMPを使った場合のもの）
アプリーケーション→MAMP→htdocs→作ったディレクトリ→config.php
といった感じです。
このconfig.phpの画面が以下です。赤線部分を変えていきます。
上からデータベース名、データベースのユーザー名、データベースのパスワード（データベースのユーザーIDのパスワード）、ホスト名
ここを６でメモしたものに入れ替えていきます。
８、ローカル環境のphpmyadminをエクスポート（ファイル化すること）
ここからはphpMyAdminというものを使っていきます。ローカル環境で構築された方ならわかると思いますが、データベースの中身を見れるツールになります。
MAMPでのエクスポートの仕方について解説します。
まずはMAMPからphpMyAdminにログインしてください。
ローカル環境で作ったおいたデータベースを選択し、（Export)エクスポートをクリックします。
その後一番上に出てくる「Export method」という場所を「Costom」にチェックを入れます。
次に「Output」という場所は「Save output to a file」にチェックを入れます。
その後、下にスクロールして一番下の「Go」をクリックします。
するとデータベースがファイル化されるので、とりあえずどこに保存したかわからなくならないよう、デスクトップにでも保存しておきましょう。
９、ローカル環境のDBを本番サーバードメイン名に置換する
それでは先ほど、エクスポートしたファイルをいじっていきます。
テキストエディタで本番用の名前に変えていきます。DBの中身にサイトのURLが多数あるのですが、それはローカル環境で作ったサイトなので、そのままでは使えません。
MAMPで作るとURLが「localhost:8888~~」みたいな感じだと思いますが、それを取得したドメイン名に全て変えていきます。
それでは先ほどのファイルをテキストエディタで開きましょう。メモ帳だと、うまくいかない可能性があるので、プログラミングなどに使うエディタがいいです。
今回は「Sublime Text」を使うことにします。
そしてテキストエディタには置換機能というものがあって、共通しているものを全て違うコードに書き換えられることができます。
それではファイルを開いて、「command＋F」を押しましょう。
そうすると置換機能が立ち上がりますので、そこで、ローカルサーバーのURLを入力します。
MAMPであれば「localhost:8888/〇〇〇〇」みたいな部分ですね。
それを入力したら「Find All」を押すと全てのURLが選択されるので、消して、取得したドメイン名を入力していきます。
ドメイン名は「〇〇〇〇.com」や「〇〇〇〇.net」みたいなものです。手順２で取得したものを入れます。
これで置換は完了したので、上書き保存しましょう。
１０、本番サーバーのphpmyadminのDBにログインし、ローカル環境のDBをインポート（９でエクスポートしたファイルを読み込ませる）
それでは先ほど、置換したDBを今度は本番サーバーに読み込ませるのですが、先ほどのファイルそのままだと容量が大きいので、まずはそのファイルを圧縮します。
DBを右クリックして圧縮しましょう。
そしたら今度は本番サーバーの方でphpMyAdminにログインします。
やり方としては
１、「Xserver」のサーバーパネルにログイン。
２、サーバーパネルから「phpmyadmin(MySQL5.7)」をクリック。
３、ユーザーとパスワードを入力。この時のユーザー名とパスワードは「手順６」で保存したものです。（注意：ブラウザキャッシュ削除しないとログインできない可能性あり）
ブラウザキャッシュ削除の方法はこんな感じ↓↓
Chrome
ブラウザ・ツール・バーのカスタマイズ・アイコンをクリックします
「設定」を選択してから、「詳細設定を表示」を選択します
「プライバシー」内で「閲覧履歴データの消去」を選択します
ダイアログが開きます。 …
「閲覧履歴データをクリアする」をクリックします
４、「手順５」で作ったDBをクリックし、「インポート」をクリック。
５、「アップロードファイル」の「ファイルを選択」をクリックし、「手順９」で置換したローカル環境のDBを圧縮したものを選択し、下にスクロールして「実行」をクリック。
１１、.htaccessを編集
ここまででだいぶ終わりました。後少しです。頑張りましょう。
次は「.htaccess」というファイルをいじっていきます。
ファイルの位置は、アプリーケーション→MAMP→htdocs→作ったディレクトリとクリックすると出てきます。
それをエディタで開いて以下の図のようにします。
変更する位置としては「RewriteBase」と「RewriteRule」の２点でしょう。画像のように変更してください。
これで「.htaccess」はOKです。
１２、FTPソフトでファイルをローカルから本番サーバーに移行する
これが最後の作業です。後少し！！！
それではFTPソフトを立ち上げます。今回は「FileZilla」を使います。立ち上げたら左上の「ファイル」→「サイトマネージャー」をクリックします。
そうすると左側に「Xserver」というものが出てくるので、クリックして右下の「接続」をクリック。
するとパスワードを尋ねられるので、パスワードを入力します。ここで使用するパスワードは、Xserverのサーバーパネルにログインする時のパスワードです。
そうするとXserverと「FileZilla 」が繋がります。
画面の見方としては、右の上下２枚が「Xserver」左の上下２枚が自分のパソコンのファイルになります。つまりは左に入っているローカル環境で作ったサイトのファイルを右のXserverに移行させたいわけです。
それではまずは右の画面から取得したドメイン名をクリックします。その後「public_html」をクリック。もしかしたら途中で切れているかもしれないですが、頭文字が「public」のやつです。
その「public_html」の中に、ローカルファイルを移行していきます。
それでは左の画面に移りまして、アプリーケーション→MAMP→htdocs→作ったディレクトリをクリックしていきます。
そのファイル全てを移行していきます。写真でいうとこんな感じだと思います。
これら全てを選択し、右の「public_html」の中にドラッグ&ドロップしてあげましょう。
するとどんどんとファイルが移行されていきます。ここは少し時間がかかりますので、辛抱強く待ってください。おそらく３０分〜１時間くらいかな？と思います。
でも待ったらそれで完了です！！あとは待つのみ！
１３、「サイトURL/wp-admin」にログインして移行されているか確認
最後にちゃんと移行できているかを確認しましょう。
「取得したドメイン名/wp-admin」とネットで検索しましょう。するとwordpressのログインページに行けるので、ログインできたら無事に移行されたことがわかります。
ちなみにこの画面でのログインはローカル環境で作成していたwordpressのログインと同じものです。
最後に
いかがだったでしょうか？初心者にとってはわりかし、難しい言葉が出てきたり、簡単には進めなかったかもしれませんが、わからないところはもう一度この記事を読みつつ、もしくは検索しつつ、頑張って移行してみてください。
もしくはお問い合わせの方から質問していただいても結構です。
これでweb制作で仕事受注できるようになったんじゃないかな？
