Help us understand the problem. What is going on with this article?

GCPでWordpressを使えるようにするまで(ドメイン→ムームー、FTP→Filezilla)。SSL化エラー/メール受信できない問題について

More than 1 year has passed since last update.

タイトル通り、WP使えるようになるまでいくつかつまづいたので、今後忘れないためにメモします。
ちなみに一番ひやひやしたのはその間、メールの受信ができなくなったことでした...。

始める前の状態

とりあえずドメインとった。GCPでWordpress使えるようにしたいけどどうしたらいい?という状態

もしドメインをまだ取ってない場合:

独自gmailも使いたい場合、ドメインからgoogleでとるといろいろ作業が楽になると思われます。
Google Domain(ドメイン)、Gsuite(Gmail)、GCP(サーバーとWordpress)と、グーグルで揃えちゃいましょう。

大元の参考

GCPとWordPressでブログを始めよう!完全図解で初心者も安心!

すごくていねいに書かれていたのと、新しい情報でとても助かりました...GCPって何?ターミナル使えない。ドメインってよくわからない。って状態でもできるように説明されています。

14 SSLの導入 まではこれでうまく行きました。
(アドレスhttpをhttpsにするところまで)

httpsにするところ(SSL化)からエラー多発のため、メモに残します。

独自ドメインでGCPのサーバーを使い、Wordpressで記事が書けるようになるまでのだいたいの流れ

*大元の参考記事に詳しく載っています。

  • GCPに申し込む(300ドルくらいの無料枠あり)
  • GCP経由でWPをダウンロード(一瞬)
  • VMインスタンスをつくる →これでWPの管理画面と、サイトページが表示されるようになる →この時点では、サイトのURLがまだIPアドレス(数字の羅列) 123.456.789みたいな。

なのでここから、IPアドレスと取得したドメイン(Quiita.comみたいな)を紐付けます。
イメージとしては、郵便番号と住所を紐づけるって覚えておくとイメージしやすいと思います。
〒123-456 は 東京都杉並区太田町、みたいな。

  • IPアドレスの固定(静的にする) → GCP上でやる
  • IPアドレスとドメインの紐付け →GCP上でまずやる →その後、自分が取ったドメインの管理サイト(私の場合はムームードメイン)にログインし、ネームサーバーを他のところ(他社)=googleにする

スクリーンショット 2019-08-30 11.27.21.png

(comではなくcom.にするとエラーが出ました)

ここまでは参考記事をもとに、さくさく進みました。

つまづいたところその1:SSHでのSSL化、エラーが出る。

無事Wordpressが使えるようになり、自分のサイトが数字の羅列(IPアドレス)ではなく、Qiita.comみたいに表示されました。
ですが、この時点では「http://」です。昔はこれでもおっけーって感じだったと思うんですが、今は「保護されてない通信」と出ちゃって、危なくないのに危ないサイトのような印象になっちゃう...。

ということでhttps化はマストだと思います。ロリポップ!とかさくらレンタルサーバーとかだと、httpsにするのにお金かかるみたいですが、GCPで自分でやると無料でできます。

でもここでつまづいた...。

httpをhttpsにすることを、SSL化すると言います。これの証明書のダウンロードとかを、GCPのVMインスタンスの中にあるSSH(macでいうターミナルみたいな。真っ黒い画面にひたすら白い文字書いてくやつ)でごにょごにょやっていきます(参考記事参照)。

ところが、default-ssl.confのファイルを編集しアップロードも終わり、いざApacheを再起動(restart)するってところでコマンド(命令文)を打ってみると...

#コマンド文
sudo systemctl restart apache2 

Failed(失敗!)と出ている。エラーの中身を調べるため、

sudo systemctl status apache2.service

と打つと、

#PCからの返事
SSLCertificateFile: file '/path/to/cert.pem' does not exist or is empty

どうやら該当のファイルが見当たらないらしい...。

これはdefault-ssl.confというファイルの中身を編集して新たに書いたものなんですが、ファイルに""つけたり、
いったん削除してもう一度アップロードしたり、半角スペース消したりしているうちにぐちゃぐちゃに...。

そこで、SSLのためにいろいろごにょごにょダウンロードしたり編集したのをいったん初期化して、別の参考サイトでやってみようということにしました。

SSL化のための新たな参考サイト

Setup Free SSL for WordPress on Google Cloud (Click-to-Deploy) (Latest)

英語のサイトですが、youtube動画で説明してくれてます。
2019年4月という最新のもの。
SSH化は念のため新しいやり方がないかやる前に参考サイトググった方がいいのかもしれません。

実際の動画を見てもらうのが一番(字幕つけると良い感じ)ですが、それはちょっと...という方とあとで見返す自分用にメモを残します。

心機一転、SSL化リベンジの流れ

参考サイトを元にしました。

  • SSHの初期化(さっきいろいろ失敗したので。新たに始める人は必要ありません)
  • GCPのVMインスタンスのSSHに接続
  • cert botのサイトにアクセス、ダウンロードのコマンドをコピー
  • SSHで上記をペースト、cert botをダウンロード
  • SSL証明書を作成 (SSHでやる)
  • Apacheを再起動 (SSHでやる)
  • WPのURLをhttpsに変える(WPの管理画面でやる)

SSHの初期化

いろいろいじってダメになっちゃったので、初期化することに。
このコマンドで初期化しました。

sudo certbot delete --cert-name qiita.com

qiita.comのところは、自分のドメイン名に変えてください。
要は、certbotダウンロードしてたのを消してねってことです。

それでも消えていないファイルがあったので、以下のコマンドで消しました。

sudo rm /etc/apache2/sites-enabled/000-default-le-ssl.conf

rm で、ファイルを消去するコマンドです。そのあとはファイルパス。
sudoは、このコマンドを実行するための権限を与える、みたいな感じです。

ちなみに今回エラーもろもろ出て、ターミナルやSSHで使う基礎的なコマンドは覚えておいた方がいいな...と痛感しました。

特にファイルに関するコマンドは覚えておくと便利です(上のrmみたいな。)

参考サイト:
2.SSHでよく使うコマンドと簡単な使い方

さて、これでSSL化をやり直す準備が整いました。

新たなSSL化

  • SSH上で、以下のコマンドをうちます。
lsb_release -a

次のcert botのサイトに行ったときに、ここに書いてある Description の中身が必要になるからです。

参考サイトでは、Debian 9.7 (stretch)になってます。

  • cert botサイトへアクセス。

certbot instructions

スクリーンショット 2019-08-30 13.12.37.png

赤で囲まれているところ、一つ目はApache、もうひとつは上のコマンドで確認したものを選びます。

  • 選択したら、そのままページをスクロールし、certbotインストールのコマンドをコピーします。(3のところ)

スクリーンショット 2019-08-30 13.15.43.png

  • SSHにペーストします
  • 次のコマンドをコピペします

スクリーンショット 2019-08-30 13.18.08.png

ふたつコマンドがありますが、上はconfigファイルの編集などいらない(自動でやってくれる)っぽいので、上のコマンドを使用します。

いろいろPCから返事が返ってきますが、
1. 自分のメアド(なんでもよい)を入力 (certbotから重要なお知らせが届く)
2. agree/disagree?と聞かれるので a と入力
3. そのあとにキャンペーンメールとか送っていいですか?と聞かれるので、 yかn を入力
4. ドメイン名を入れろと聞かれるので、 
自分のドメイン名 www.自分のドメイン名を入力。 qiita.com www.qiita.com のように。
5. "Which virtual hosts would you like to choose?"と聞かれるので、2を入力。
6. 以下のように聞かれるので、2を入力。

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1. apacheをリスタートするコマンドをうつ。
sudo service apache2 restart

その後何も出なかったら、エラーなしでうまくいっています!

  • Wordpressの管理画面で、URLをhttps://に変更

スクリーンショット 2019-08-30 16.33.17.png

  1. ログイン後、ナビゲーションメニューの設定→一般をクリック。
  2. Wordpressアドレス と サイトアドレス を、http→httpsに変換。
  3. 変更を保存をクリック。
  4. https://自分のドメイン で、サイトにアクセスできたら成功!

とはいえ自分はエラーがまだまだ出たので、その処理を書きます。

つまづいたところその2:WPでhttpsに変えたら、反映がうまくいかずWPにログインできなくなった

上のWP管理画面でhttpsに書き直し、保存をクリックしたら画面がクラッシュしたみたいになりました。
その後WP管理画面のログインページに行けず。

いったんhttpに戻したい...ってときは、php-myadminで戻すことができます。
アクセス方法は以下。

  • GCP → Deployment Manager → デプロイ → 名前をクリック → 「Access the phpMyAdmin web interface」の下にあるURLへ。
  • 上に書いてあった 「MySQL root user」と「MySQL root password」でログイン。

スクリーンショット 2019-09-03 22.32.34.png

-左から Wordpress → Wordpress Options をクリック。

スクリーンショット 2019-09-03 22.35.37.png

-一番上の site_url のところの option_valueを、「https://」から「http://」に戻す。

スクリーンショット 2019-09-03 22.38.25.png

つまづいたところその3:SSL化はうまくいっているのに、サイトが表示されない

certbotを使ったSSL化はうまくいっているのに、https://ドメイン名にアクセスしてもサイトが表示されない。

調べたところ、どうやらfirewallがブロックされていた模様。
もう一度、GCPに戻ります。

  • ナビゲーションメニューから、Compute Engine→VMインスタンスへ。
  • インスタンスをクリック。
  • VMインスタンス詳細ページで、ページ上部にある編集をクリック

スクリーンショット 2019-08-30 16.56.03.png

  • スクロールするとファイアウォールという欄があるので、両方にチェックを入れる。

スクリーンショット 2019-08-30 16.56.58.png

  • ページ一番下の保存をクリック。

これで無事、サイトが表示されるようになりました。
(ここの部分、GCPでインスタンス作成するときに入れ忘れていた可能性ありでした...。)

参考サイト:
After installing a SSL, got Assessment failed: Unable to connect to the server
ファイアウォール ルールの使用

つまづいたところその4: 同じドメインを使っているメアドのメール受信ができなくなった

なんだかんだこれが一番困りました。

GCPの設定をしたとき、IPアドレスとドメイン名を紐づけるため、ネームサーバーを変更したと思うのですが、これにより、一時的にメール受信ができなくなりました。

ネームサーバーを変更すると、反映されるのに最大で72時間かかると書いてあったので待ってみたのですが、待てども待てども受信できない...。

というわけで、Gsuiteに問い合わせるとGoogle Domainに問い合わせてくれと言われ、Google Domainに問い合わせたのですが、窓口をたらい回しにされ、最終的にはムームードメインに問い合わせてくれとのこと。

スクリーンショット 2019-09-03 22.45.34.png

スクリーンショット 2019-09-03 22.45.59.png

スクリーンショット 2019-09-03 22.46.30.png

それでムームードメインに問い合わせても、変更後のネームサーバーの方に問い合わせてくれとさらなるたらい回し。

やれやれ...。

そこでいろいろ調べてみて、ふと、MXレコードをセットするの、GCPでやらないといけないのでは...?と気づき、やってみたら解決しました。

そもそもネームサーバーとは?

GCPでWordpressを立ち上げる段階で、IPアドレスとドメイン名の紐付けを行ったかと思います。
この紐付けを管理しているのが、ネームサーバーです。

ムームードメインでドメインを取得した場合、デフォルトで、このドメインサーバーは、ムームードメインが持っている「ムームーDNS」というものになっています。

このネームサーバーを、GCPでWordpressをつくった際に、Google Cloud DNSというネームサーバーに移行しているんですね。

スクリーンショット 2019-09-03 23.05.02.png

「ドメイン名でアクセスリクエストがあったときに、このIPアドレスを返す」という作業をするのを、ムームーDNSからGoogle Cloud DNSに変更しました。

この変更手続きは、GCP上と、ムームードメイン上(ドメインを取得したサイト)の両方で行いました。

MXレコードとは

MXレコードは、独自ドメインでメールを使いたい際に設定しないといけないものです。
GCPでWordpressを使う前に、独自ドメインでGmailを使っていた方は、このMXレコードを取得したドメインサイト上(ムームードメインなど)で設定していたかと思います。

スクリーンショット 2019-09-03 23.10.57.png
(ムームードメインのサイトでのMXレコード)

これまではこれでメールが使えてたのですが、今回、ネームサーバーをムームーからGoogleに変えたのに合わせ、MXレコードもGCP側に書いておかないといけません。

上で書いていた、ムームーでのMXレコードを、GCPのサイトで書きます。

スクリーンショット 2019-09-03 23.14.16.png
(GCPサイトでのMXレコード)

これは、ネームサーバーを変更したときと同じ箇所、 GCP → ネットワークサービス → Cloud DNS → レコードセットの追加 のところで追加することができます。

具体的な設定方法は公式サイトに載っています。
GCP Cloud DNS: G Suite の MX レコードを設定する

この作業を行ったところ、1時間くらいでメールの受信が再びできるようになりました。

また、変更後すぐにメールの受信ができなくても、このサイトでドメイン名を入力して、MXレコードが反映されてたら、設定はうまくいっていると思われます。
G Suite Toolbox Dig

参考サイト:
※理解を深める※ DNSサーバとは
※理解を深める※ MXレコードとは
※※※これをやる※※※ GCP Cloud DNS: G Suite の MX レコードを設定する
※↑の参考に※ Google Cloud DNSへの移行手順
※Gsuite使うときにやったこと※ Google Domains: G Suite の MX レコードを設定する
※Gsuite使うときにやったこと※ G Suite の MX レコードの値

FilezillaでWPのファイルを作成できるようになるまで

Wordpress使えるようになったけれど、自分がつくったhtml、cssファイルはどうやってあげるの?となったとき。
(WPの既存のテーマを使う場合は必要ありません)

そんなときはFTPを使います。ここではFilezillaの説明を。
FTP?Filezilla?って方は例えばこんな参考記事があります。

超初心者向け!FileZilla(ファイルジラ)の使い方

Filezillaをダウンロードし終わったところからここではやっていきます。
大元の参考動画はこちら。(英語のみ)

WORDPRESS ON GOOGLE CLOUD and HOW TO FTP TO IT
これの Create SSH key (private and public key) 10:12  ってところから始める。

  • macのターミナルを立ち上げる。
  • SSHキーをつくるコマンドを打つ。
ssh-keygen -t rsa -f ~/.ssh/ +SSHのキーを置くファイルパスをつくる -C +WPのユーザーネーム

#例えば
ssh-keygen -t rsa -f ~/.ssh/qiita -C qiita
  • "Enter passphrase"と返ってくるので、パスワードを生成。
    これでプライベートキーとパブリックキーが生成されます。それぞれのファイル場所が示される。

  • GCPに行って、Compute Engine→VMインスタンス→インスタンス名をクリック。

  • ページ上部の「編集」ボタンをクリック。

  • スクロールして、「SSH キーが0 個あります」のところの編集ボタンをクリック。

  • macのターミナルに戻り、以下のコマンドを打つ。

cat ~/.ssh/+パブリックキーの場所 (さっき表示されていた.ssh/のあとをコピペ)

#さっきのパブリックキーが .ssh/qiita.pub なら、 qiita.pubをコピペ
  • パブリックキーが返ってくるので、ssh-rsa から、 admin までをコピー
  • gcpに戻って編集画面にペースト。ページ下の保存をクリック。
  • Filezillaを立ち上げる。左上一番端のアイコンをクリック。

スクリーンショット 2019-08-30 17.59.58.png

  • サイトマネージャーが立ち上がるので、左下の「新しいサイト」をクリック。名前を変更(なんでも良い)。

スクリーンショット 2019-08-31 23.04.50.png

  • Protocol:SFTP、 ホスト:IPアドレスまたはドメイン名、 ログオンタイプ:鍵ファイル、  ユーザー:WPのユーザーネーム。
  • 鍵ファイルの参照ボタンを押して、ホームのファイルに行って、「.ssh」のファイルの中身を表示。 macだと「command + shift + .」で「.ssh」ファイルの中身が出てくる。
  • さっきつくったプライベートキーの方のファイル(.pubがついてない方)を選択。
  • convert keyfile?と聞かれるので「yes」を押す。
  • SSHキーを生成したときにつくったパスワードを入力。
  • 「always trust...」にチェックを入れる。
  • もう一度パスワード入力。
  • これでWPに接続されました!(filezilla右側にファイルが表示されるようになる)
  • WPのテーマをいじるときのHTML/CSSファイルは、以下の場所に置く。 .. → .. → var → www → html → wp-content → themes → ここに新しいテーマのファイルを作成!

これでやっとWPのテーマをいじる準備が整いました...!

b2bmakers
大学で文学部独文学専攻というゴリゴリの文系にいた20代女子が、ひょんなことからHTML、CSS、Python、ディープラーニングなどに足をつっこむように。プログラミングって聞くと鳥肌が立ってしまう、数字をみるとめまいがしてしまうような、そんなゴリゴリの文系の方に向けて文系チックに書いています。個人ではライティングや編集をしています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした