ほねつき備忘録

ほねつき備忘録

僕のブログです。僕のためのブログです。

GCPでSSL化したWebページを無料で公開する方法

友達が最近SSL化したページを公開したいと言っていたのでやり方を書きます。

今回はGoogleが提供するレンタルサーバー、Google Cloud Platform(以下GCP)の無料期間(設定によっては永久に無料)を使って1からサーバを建ててみようと思います。

 

GCPの無料期間登録にはお金がかかりませんが、クレジットカードが必要です。もし持っていない場合は未成年でも利用できるLINE Pay カードVANDLE CARD[バンドルカード]がオススメです。

また、カードを登録する際にGoogleはカードを確認するため200円請求するため、最初に登録する場合は200円入れておく必要があります。(後日全額返ってきます)

 

 

 

1. GCPの無料トライアルに登録

 

cloud.google.com

 

上記リンクから無料トライアルに登録してください。(Googleアカウントが必要)

 

f:id:BonyChops:20190516214329p:plain

ステップ1

f:id:BonyChops:20190516214429p:plain

「個人」か「ビジネス」を選択

f:id:BonyChops:20190516214518p:plain

お支払い情報の入力 (画像はLINE Pay カード)

ここでクレジットカード情報を入力しますが、実際にお金がかかることはありません。(ただしカード確認のため最初に200円引かれますが、後日返ってきます)

f:id:BonyChops:20190516214818p:plain

こうなればOK

f:id:BonyChops:20190516215113p:plain

コンソール画面

2. GCPインスタンスの作成

早速インスタンス(サーバー)を作ってみましょう。

左メニュー(出てなければ左上の三本線から)の「Compute Engine」→「VM インスタンス」をクリック。ピンマークをクリックすると上に常駐させることができて便利です。

f:id:BonyChops:20190516215514p:plain

 

作成。(「課金を開始」等が表示されている場合はそれをクリック。無料トライアルで支給されるクレジットから引かれるため、実際にお金が支払われることはありません。)

f:id:BonyChops:20190516215745p:plain

作成

永久に無料で使うには

GCPの無料トライアルには期限があり、1年経つかクレジットが終了した時点で終了となりますが、ある条件を満たしていると無料期間が過ぎても使い続けることができます(Always Free)。今回はその条件に合わせてインスタンスを作成します。

(Always Freeの詳しい条件:GCP Free Tier  |  Google Cloud Platform Free Tier  |  Google Cloud)

 

  1. まず、リージョンを「us-」から始めるものを選び(ただし[us-east4]を除く)、「マシンタイプ」のコアをmicroに指定します。f:id:BonyChops:20190516221022p:plain
  2. ブートディスクを(説明の都合上)「Ubuntu 16.04 LTS」、そしてディスクのサイズを30GB以下に設定して、下の「選択」をクリック。

    f:id:BonyChops:20190516221911p:plain

    f:id:BonyChops:20190516221922p:plain

  3. ファイアウォールルール設定のHTTP,HTTPSトラフィックを許可にチェック

    f:id:BonyChops:20190516222315p:plain

  4. 作成をクリック。
  5. インスタンスが作成されるまで待ちます。

    f:id:BonyChops:20190516222443p:plain

    くるくる
  6. 完成

    f:id:BonyChops:20190516222524p:plain

    完成!

3. ファイアウォールの詳しい設定(ftp用)

GCPではインスタンス内のufwなどを用いらず、コンソールの「ファイアウォール ルール」から設定します。先程自動的にHTTP,HTTPS用に設定はされましたが、ftp通信用の20,21番ポートも開ける必要があるため、その設定をします。

  1. VPCネットワーク」→「ファイアウォール ルール」

    f:id:BonyChops:20190516223308p:plain

  2. ファイアウォール ルールの作成」

    f:id:BonyChops:20190516223517p:plain

  3. 「名前:適当」「トラフィックの方向」「ターゲット:ネットワーク上の全てのインスタンス」「ソースIPの範囲:0.0.0.0/0」

    f:id:BonyChops:20190516225437p:plain

     

  4. 「指定したプロトコルとポート」で「tcp」にチェック。ポートは「20,21」にして作成。

    f:id:BonyChops:20190516225142p:plain

     

  5. もう一つ、下りのルールを作成する必要があります。2~5の作業をもう一回行い作成ください。基本的に「名前」「トラフィックの方向」以外の項目は全て同じで大丈夫です。
  6. 完成

    f:id:BonyChops:20190516225833p:plain

    2つできた

 

4. SSHインスタンスに接続

いよいよ作成したインスタンスに接続します。ちなみにSSHとはリモートコンピュータと通信し、コマンドを遠隔で操作するためのプロトコルのことです。

  1. 「Compute Engine」→「VM インスタンス
  2. SSH」をクリックして接続。

    f:id:BonyChops:20190516231020p:plain

  3. 別窓が開いてSSHでの接続が開始されます。f:id:BonyChops:20190516230539p:plain
  4. 接続

    f:id:BonyChops:20190516230729p:plain

    おぉ

5. Apacheをセットアップ

5.1 Apacheをインストール

以下のコマンドを1行づつ実行してください。

sudo apt update
sudo apt install apache2 -y

はい。たったこれだけです。

5.2 Apacheがインストールできてるか確認

ちゃんと適用されてるか確認するには、(SSHは閉じずに)先程のページに戻り、サーバーのIPをクリックすると...

f:id:BonyChops:20190516231753p:plain

クリック

f:id:BonyChops:20190516231906p:plain

あれ?

...。はい。このままでは繋がりません。URLをよくみてください。

f:id:BonyChops:20190516232013p:plain

あっ...(察し)

頭が「https://」になっています。ApacheのデフォルトではまだSSL化されていませんので仕方ありませんね。ということで、「https://」のsを消してアクセスしてみてください。

f:id:BonyChops:20190516232420p:plain

成功!

このページが出れば成功です。Apacheが正しくインストールされています。

 

5.3 Apacheの設定

Apacheのデフォルト設定では.htasccesが無効で、ディレクトリ一覧表示が有効になっているため設定を変えます。

Ubuntuの場合、設定ファイルは/etc/apache2/apache2.confにあります。

では早速編集...の前にファイルのバックアップを取ります。いざなんかあったときのためです。絶対やっておいたほうが良いです。僕はこれを取らずに後悔したことが何度もあります。頼むからとって。

sudo cp /etc/apache2/apache2.conf /etc/apache2/apache2.conf.orig

 これで、いざファイルを編集して、「うわぁ編集ミスった~」ってときは以下の様にすると復活されられるようになりました。

sudo cp /etc/apache2/apache2.conf.orig /etc/apache2/apache2.conf

では早速編集しましょう。(僕は初心者なんでnano使いますね...)

sudo nano /etc/apache2/apache2.conf

...

# This is the main Apache server configuration file.  It contains the
# configuration directives that give the server its instructions.
# See http://httpd.apache.org/docs/2.4/ for detailed information about
# the directives and /usr/share/doc/apache2/README.Debian about Debian specific
# hints.
#
#
# Summary of how the Apache 2 configuration works in Debian:
# The Apache 2 web server configuration in Debian is quite different to
# upstream' suggested way to configure the web server. This is because Debian'
# default Apache2 installation attempts to make adding and removing modules,
# virtual hosts, and extra configuration directives as flexible as possible, in
# order to make automating the changes and administering the server as easy as
# possible.
# It is split into several files forming the configuration hierarchy outlined
# below, all located in the /etc/apache2/ directory:
#
#       /etc/apache2/
#       |-- apache2.conf
#       |       `--  ports.conf
#       |-- mods-enabled
#       |       |-- *.load
#       |       `-- *.conf
#       |-- conf-enabled
#       |       `-- *.conf
#       `-- sites-enabled
#               `-- *.conf
...

なんかでてきましたね。これがApacheの設定ファイルです。では、まず

<Directory /var/www/>

を探してください。僕の場合は164行目にありました。(nanoの場合「Ctrl+C」で現在の行数を表示できます。結構便利。)

その下の

        Options Indexes FollowSymLinks
AllowOverride None

 これを

        Options FollowSymLinks
AllowOverride All

 このように変更します。そしたら、

「Ctrl+X」「Y」「Enter」で保存して終了。

Apacheに設定を反映するには、再起動してください。

sudo service apache2 restart

最後に、htmlを置くディレクトリの権限を変えておきます。

デフォルトでは/var/www/htmlになってます

sudo chmod -R 777 /var/www/html

 ひとまずApacheの設定は以上です。

 

6. vsftpdのセットアップ

vsftpdをインストールする前にユーザーのパスワードを変えます。ここで設定したパスワードがftpでログインする際のパスワードになります。(ちなみにユーザー名はwhoコマンドかusersコマンドで確認できます)

sudo passwd ユーザー名

 パスワードを打つ際何も表示されませんが、セキュリティの観点上そうなっているだけで、実際は入力できています。入力し終わったらEnter押して、もっかい同じパスワード打って、

passwd: password updated successfully

 こうでてきたらOK。

 

 

6.1 vsftpdのインストール

sudo apt update
sudo apt install vsftpd -y

 インストールおわり。

 

6.2 vsftpdがインストールできてるか確認

とりあえず確認

ftp localhost
Connected to localhost.
220 (vsFTPd 3.0.3)
Name (localhost:ユーザー名):

 なにも入力せずEnter.

Password:

 さっき設定したパスワードを入力。

230 Login successful.
Remote system type is UNIX.
Using binary mode to transfer files.

 こうでてくれば成功。(もしできない場合はvsftpdがうまく入っていないかファイアウォール ルールの設定がおかしいか、パスワードが変わっていないかのどれか)

bye

 で終了。

 

6.3 vsftpdの設定

バックアップ、しようね。

sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.orig

 復活は、

sudo cp /etc/vsftpd.conf.orig /etc/vsftpd.conf

 

編集しよう。

sudo nano /etc/vsftpd.conf

 

31行目らへん※行数は環境によって違うことがあります

# Uncomment this to enable any form of FTP write command.
#write_enable=YES

# Uncomment this to enable any form of FTP write command.
write_enable=YES

 

35行目らへん

#local_umask=022

local_umask=002

 

 

99行目らへん

#ascii_upload_enable=YES
#ascii_download_enable=YES

ascii_upload_enable=YES
ascii_download_enable=YES

 

 

131行目らへん

#ls_recurse_enable=YES

ls_recurse_enable=YES

 

最終行に以下を追加

local_root=/var/www/html/

 

「Ctrl+X」「Y」「Enter」で保存&終了。

最後にvsftpdを再起動して適用。

sudo service vsftpd restart

 ...はい。お疲れ様でした。vsftpdの設定、終わり!

一応、次のコマンドを使って正常に動くかどうかだけ確認してください。

 

sudo service vsftpd status

 

成功例

 vsftpd.service - vsftpd FTP server
   Loaded: loaded (/lib/systemd/system/vsftpd.service; enabled; vendor preset: enabled)
   Active: active (running) since Thu 2019-05-16 15:55:39 UTC; 2min 6s ago
  Process: 6207 ExecStartPre=/bin/mkdir -p /var/run/vsftpd/empty (code=exited, status=0/SUCCESS)
 Main PID: 6214 (vsftpd)
    Tasks: 1
   Memory: 712.0K
      CPU: 15ms
   CGroup: /system.slice/vsftpd.service
           └─6214 /usr/sbin/vsftpd /etc/vsftpd.conf

May 16 15:55:39 instance-1 systemd[1]: Starting vsftpd FTP server...
May 16 15:55:39 instance-1 systemd[1]: Started vsftpd FTP server.

 失敗例

 vsftpd.service - vsftpd FTP server
   Loaded: loaded (/lib/systemd/system/vsftpd.service; enabled; vendor preset: enabled)
   Active: failed (Result: exit-code) since Thu 2019-05-16 15:59:46 UTC; 7s ago
  Process: 6296 ExecStart=/usr/sbin/vsftpd /etc/vsftpd.conf (code=exited, status=2)
  Process: 6292 ExecStartPre=/bin/mkdir -p /var/run/vsftpd/empty (code=exited, status=0/SUCCESS)
 Main PID: 6296 (code=exited, status=2)
May 16 15:59:46 instance-1 systemd[1]: Starting vsftpd FTP server...
May 16 15:59:46 instance-1 systemd[1]: Started vsftpd FTP server.
May 16 15:59:46 instance-1 systemd[1]: vsftpd.service: Main process exited, code=exited, status=2/INVALIDARGUMENT
May 16 15:59:46 instance-1 systemd[1]: vsftpd.service: Unit entered failed state.
May 16 15:59:46 instance-1 systemd[1]: vsftpd.service: Failed with result '-code'.

 ↑この場合.confファイルの構文ミスの可能性が高いです。一度バックアップした.confを復活させてからもう一度やってみてください。

 

....ちょっと疲れたからそろそろ休憩してもいいんじゃないですかね。

 

7. FTPクライアントソフトからアップロード

HTML等のファイルをアップロードします。ここではFFFTPを使ってあげてみます。

 

  1. 接続

    f:id:BonyChops:20190517012425p:plain

  2.  新規ホスト

    f:id:BonyChops:20190517011445p:plain

  3.  「ホストの設定名:適当」「ホスト名(アドレス):IPアドレス」「ユーザー名:ユーザー名(whoコマンド,usersコマンドで確認)」「パスワード:パスワード」

    f:id:BonyChops:20190517011706p:plain

  4. 「PASVモードを使う」のチェックを外す

    f:id:BonyChops:20190517011955p:plain

  5.  OKを押して閉じる。

  6. 接続

    f:id:BonyChops:20190517012057p:plain

  7. はい

    f:id:BonyChops:20190517012153p:plain

  8. つながった!

    f:id:BonyChops:20190517012502p:plain

    YES!!!!!!!
  9. すでにデフォルトで入っているindex.htmlは消してOKです。
  10. HTMLファイルをアップロード
  11. サーバーIP打って反映されてればOK。

    f:id:BonyChops:20190517013815p:plain

    良き

 

8. freenomでドメイン取得

 SSL化には当然ドメインが必要なので取得します。今回は無料で取得できるfreenomから取得します。(クレジットカード情報はいりません)

www.freenom.com

上記リンクへアクセス。

f:id:BonyChops:20190517230156p:plain

「新しいドメインを探します」にURLの「http(s)://〇〇〇.△△△」の〇〇〇にしたい部分を書いてください。例えば、「http(s)://bonychops.cf」を望む場合、「bonychops」と入力します。

f:id:BonyChops:20190517230442p:plain

「今すぐ入手!」が出てるやつは購入できます。

.comなどの有名所は有料ですね...

f:id:BonyChops:20190517230936p:plain

f:id:BonyChops:20190518000520p:plain

無料で取れる一番長く取れる「12 Months @ Free」を選択。

f:id:BonyChops:20190517231646p:plain

メールアドレスを入力

f:id:BonyChops:20190517232011p:plain

するとこんなメールが来るので、リンクを24時間以内にクリック。

f:id:BonyChops:20190517232737p:plain

必要事項を記入。

f:id:BonyChops:20190517234246p:plain

注文を確定。

f:id:BonyChops:20190517234502p:plain

注文確定。「Click here to go to your Client Area」をクリック。

f:id:BonyChops:20190517234715p:plain

「Services」→「My Domains」

f:id:BonyChops:20190517235128p:plain

「Manage Domain」

f:id:BonyChops:20190517235257p:plain

「Manage Freenom DNS

f:id:BonyChops:20190517235426p:plain

「Name:空白」「Type:A」「TTL:3600」「Target:サーバーのIP」を入力し、「Save Changes」

f:id:BonyChops:20190517235730p:plain

f:id:BonyChops:20190517235844p:plain

こうなればOK

「<<Back to domain details」「Back to Domains List」でドメインリストに戻り、ドメイン名をクリックするとそのまま確認できます。反映されたかどうか確認してください。(反映には数分から数十分かかるみたいです)

f:id:BonyChops:20190518000228p:plain

f:id:BonyChops:20190518000252p:plain

反映されてる

SSL化に興味がない人はここでおしまいです。お疲れ様でした。

(ここから先は僕が実際に取得したドメイン「bonychops.com」を使ってまとめます)

8. Let's EncryptでSSL

皆様、長らくお待たせいたしました。

いよいよ最終工程であるSSl化をいたします。

その前に、GCPコンソールおよびインスタンスの開き方は覚えていますか?

console.cloud.google.com

上記リンクからログイン。

左のメニュー→「Compute Engine」→「VM インスタンス」です。

では、「SSH」をクリック。

sudo add-apt-repository ppa:certbot/certbot

 実行すると

 This is the PPA for packages prepared by Debian Let's Encrypt Team and backported for Ubuntu(s).
More info: https://launchpad.net/~certbot/+archive/ubuntu/certbot
Press [ENTER] to continue or ctrl-c to cancel adding it

 と出てくるので、Enter。続けて以下のコマンドを実行。

sudo apt update
sudo apt install python-certbot-apache -y


これでLet's Encryptを自動で設定してくれるCertbot君がインストールされました。早速呼び出してみましょう。これが最後のステップです。

 

sudo certbot --apache 
Enter email address (used for urgent renewal and security notices) (Enter 'c' to
cancel):

 メールアドレスを入力してください。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
agree in order to register with the ACME server at
https://acme-v02.api.letsencrypt.org/directory
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(A)gree/(C)ancel:

 規約を読み、「A」を入力して同意。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about our work
encrypting the web, EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o:

「入力していただいたメールアドレスをLet's Encrypt projectおよび非営利団体であるCertbotの開発者の創設パートナーであるEFFと共有しますか?していただいた場合、こちらから活動の紹介、EFFのニュース、キャンペーン、そしてデジタル活動の自由をサポートする方法をご紹介します。」こちらは任意ですので、するなら「Y」、しないなら「N」です。

No names were found in your configuration files. Please enter in your domain
name(s) (comma and/or space separated) (Enter 'c' to cancel):

 サーバーに割り当てたドメインを入力します。例えば「http(s)://bonychops.cf」の場合、「bonychops.cf」になります。

...(長文)
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.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

 重要!!!必ず見てください!!!これはhttpを残すか残さないかの設定です。

「1」の場合httpはそのま残り、http,https,どちらでも接続できるようになります。

「2」は、httpからhttpsへリダイレクトするようにし、httpsのみにする設定です。

セキュリティの観点上、僕は2を強くオススメします!!!!!

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations! You have successfully enabled https://bonychops.com

You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=bonychops.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/bonychops.com/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/bonychops.com/privkey.pem Your cert will expire on 2019-08-15. To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le

やったね!!!ついに念願のSSL化に成功です!!!おめでとう!!!

f:id:BonyChops:20190518010126p:plain

涙がとまらない...

9. 終わり

いやー、ついに無料でSSL化したWebサイト作っちゃいましたよ。正直日本はまだSSLを導入したサイトが少ないみたいなんで、このブログが少しでもSSL化に貢献できていれば光栄です。また、GCPを使って無料で作ることはできましたが、このインスタンスのスペックははっきり言うとあまりホスティングには望ましくないので、もし本格的に運用するのであれば、ちゃんとお金払ってどっかサーバー借りましょう。本当にお疲れ様でした。

 

10. ちなみに

このブログを書くにあたって実際に作成したサイトです。

bonychops.com

お気づきの方もいると思いますが、そうです、bonychops.cf(忍者サーバー)からbonychops.com(GCP)へ移行しました。内容は同じですがぜひ見てってください。