初心者でもサーバー構築、ドメイン名取得、https化、WordPressの導入までできちゃった!

2018年1月2日に公開した記事ですが、https化の説明が一部不足しておりましたので、修正して2019年1月16日に再度公開しています。

こんにちは。TOMMY(トミー)です。

勉強したことを情報発信したい!
そして、フィードバックをもらいたい!

ということで、いつもCodePenを利用していたのですが、CodePenでは表現するのに限界がありました…。
CodePen以外で情報発信できないか上司に相談したら「サーバー構築したらいいじゃん!」と簡単に言われたので、そこからサーバー構築をすることになりました(^_^;)

当サイトを立ち上げるまでの流れを忘れないようにまとめています。

今回行なった作業
  • サーバー構築
  • ドメイン名取得
  • https化
  • WordPressの導入
  • データベース作成

CloudGarage(サーバー構築)

サーバーには様々な種類があり、今回はVPS(バーチャルプライベートサーバー)を選択しました。
サーバーの種類について、わかりやすく解説してあるサイトがありましたので、詳しくは下記をご覧ください。

参考 VPSって何?という人に日本一分かりやすく解説。レンタルサーバー、クラウドとの違いも紹介。ゴトーのブログ

 

今回はVPSを利用するためにCloudGarageというサービスを使っています。
CloudGarageは、初心者でもわかりやすく、インスタンスを自由に組み合わせることができるためオススメです。

また、Dev Assist Program(DAP)という「エンジニアの好奇心やアイディアをカタチにする」ためのプログラムがあり、審査は必要になりますが「CloudGarage」を無償提供されています。

参考 開発者向けにインスタンスを無償提供制度CloudGarage

 

それでは、さっそくサーバー構築を行いましょう!

  1. CloudGarageのアカウント登録を行います。
    CloudGarage公式サイト:https://cloudgarage.jp/
  2. アカウント登録後、「インスタンスの追加」より構築を行います。
  3. インスタンスサイズ選択
    「CPU 1core / メモリ1GB / SSD 50GB」を選択します。
    (使用用途に合わせて調整してください。)
  4. OS/イメージ選択
    アプリケーションから選択」を選びLAMP/Ubuntu-16.04-64bit」を選択します。
    今回はWordPressを導入する予定ですので、データベース(MySQL)の含まれているLAMP環境を選択しています。
    (使用用途に合わせて調整してください。)
    LAMP環境ってなに?と思われた方は、下記のサイトをご覧ください。
    参考 LAMP環境ってなに?Webサービスを作るための環境構築を理解しよう株式会社LIG
  5. 接続許可設定
    「かんたん設定」を選び「WordPressホスティングプラン」を選択します。
  6. SSH Key設定
    使用しない」のままで次に進みます。
  7. インスタンス情報
    下記の*」必須項目を入力します。
    インスタンス名: 任意のわかりやすい名前(今回はtommy)
    コメント: 空欄で可
    rootパスワード: パスワード
    rootパスワード確認: パスワード
    ※「rootパスワードは、英字大文字/英字小文字/数字/記号を1文字以上混在して、9文字以上、70文字以内で入力しください。」と注意書きがあります。
  8. 「インスタンス作成」ボタンを押したら完了です。

インスタンスが作成できたら、インスタンスの一覧が表示されますので、「インスタンス名(今回はtommy)」を選択すると情報が表示されます。

インスタンス情報の「グローバルネットワーク」欄に「IPアドレス」が表示されます。

これで自分の「IPアドレス」をGETだぜ!!

 

IPアドレスを無事にGETできたら、「ブラウザのアドレスバー」にIPアドレスを入力し、「Ubuntuの画面」が表示されたらサーバー構築成功です!!!

【ブラウザのアドレスバー】

Ubuntuの画面】

 

お名前.com(ドメイン名取得)

IPアドレスでの表示のままでは、ハッキングされるなどの危険性がありますので、「〇〇.com」や「〇〇.co.jp」などのドメイン名へ変更します。

今回は「お名前.com」を使ってドメインを取得しました!

ドメイン名は、任意の名前をつけることができます。
しかし、すでに希望の名前が使用されている場合は利用できません。
そのため、希望のドメイン名が利用可能かどうか、下記の黄色で囲っている枠に入力し検索してみましょう!

【お名前.com:https://www.onamae.com/

私は「tommy-design」で検索し利用可能でした!
.work」が年間の利用額が1円でしたので、「tommy-design.work」でドメインを取得してみました。

ドメインを取得したら、DNS(Domain Name System)設定を行います。

  1. 「お名前.com」へログインしたら、「DNS」を選び、「ドメインのDNS関連機能設定」を選択し「次へ」を押します。
    もし、「更新手続きをお忘れではございませんか?」の画面が出た際は、登録したばかりなので「更新画面から移動する」を選択し無視して問題ありません。
  2. 「内部ドメイン一覧」から作成したドメイン名を選択し「次へ進む」を押します。
  3. 「DNSレコード設定を利用する」の「設定する」を選びます。
  4. DNSレコード設定ページの真ん中あたりに、設定する画面があります。
    ホスト名: tommy-design.work
    TYPE: A
    TTL: 3600(デフォルト値)
    VALUE: CloudGarageで取得した「IPアドレス」を入力
    状態: 有効
    追加: 追加
    上記の入力を終えたら、画面一番下まで進み「確認画面へ進む」を押します。
    確認画面で最終確認後、一番下まで進み「設定する」を押すと完了です。

IPアドレスとドメイン名の反映にしばらく時間がかかります。
「ブラウザのアドレスバー」に「ドメイン名(今回であれば「tommy-design.work」)」を入力し、「Ubuntuの画面」が表示されたら成功です!!!

【ブラウザのアドレスバー】

Ubuntuの画面】

 

もし、反映されない場合はCloudGarageがタイムアウトしている可能性がありますのでリロードして再度ログインし、画面右上にあります再起動(強制)を行なってください。

 

FileZillaFTPソフト)

次にFTPソフトを利用しWordPressを導入します。

  1. 「新しいサイト」を選び、下記の内容を入力します。
    プロトコル: SFTP-SSH File Transfer Protocol
    ホスト: CloudGarageで取得したIPアドレス
    ポート: 空欄で可
    ログオンタイプ: 通常
    ユーザー: root
    パスワード: CloudGarageで登録したrootパスワード
    上記の入力を終えたら「接続」を押します。
  2. 「不明なホスト鍵」と表示が出ますが「OK」を選択します。
  3. これでサーバーへの接続が完了です!!!
    サーバーへ接続すると「root」ディレクトリ内が表示されますので、「/var/www/html/」へ移動します。
    サーバーにアップロードするファイルは、/var/www/html/」ディレクトリ内にアップロードしていきます。
  4. WordPressを入れるためにダウンロードします。
    WordPressダウンロード:https://ja.wordpress.org/
  5. ダウンロードが完了したら、WordPress内のファイルを全て先ほどの「/var/www/html/」ディリクトリ内へアップロードします。
  6. WordPressには「index.php」が存在するため、もとから入っている「index.html」を削除します。
  7. 「ブラウザのアドレスバー」に「ドメイン名(今回であれば「tommy-design.work」)」を入力し、「WordPressの画面」が表示されたら成功です!!!

【ブラウザのアドレスバー】

【WordPressの画面】

httpからhttps化する

httpHyper Text Transfer Protocol)とは、ウェブサイトを呼び出す通信規約(プロトコル)のことで、通信内容の暗号化がされることなく、そのまま通信を行うため、第三者に覗き見される危険性があります。
また、https化されてないとGoogle Chromeでは「保護されていない通信」と警告が出てしまいます。

httpsHyper Text Transfer Protocol Secure)になると「Secure」の「s」がつくことで、通信内容の暗号化がされ安全な通信へと変化します。
お問い合わせフォームなど個人情報を入力することがありますので、第三者への情報漏洩を防ぐためにもhttps化を行いましょう。

CloudGarageの右上に「コンソール表示」がありますので、こちらよりコンソール画面を開きます。

コンソール画面が開いたら、まずはインスタンスにログインします。

tommy login: root
password: rootのパスワード ※画面上表示されませんが入力はされています

 

下記が表示されたらログイン完了です。

root@tommy:~#

 

下記サイトを参考にhttps化していきます。
Apacheをインストール」から「証明書セットアップ」まで順次行います。

参考 Let’s encryptでUbuntu 16.04のApacheをhttps化するにはHRENDOH'S TECH MEMO

参考サイト内で私がつまづいた点をまとめておきます。

証明書のセットアップの方法は下記の二つがあります。
私の場合は「Certbotコマンドの場合」でうまくいきました。

  • 証明書のセットアップletsencryptコマンドの場合
  • 証明書のセットアップCertbotコマンドの場合
【証明書のセットアップCertbotコマンドの場合】

# certbot --apache
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Enter email address (used for urgent renewal and security notices) (Enter 'c' to
cancel): admin@letsencrypt.work(メールアドレスを登録する)
-------------------------------------------------------------------------------
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.1.1-August-1-2016.pdf. You must agree
in order to register with the ACME server at
https://acme-v01.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 EFF and
our work to encrypt the web, protect its users and defend digital rights.
-------------------------------------------------------------------------------
(Y)es/(N)o: 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): tommy-design.work
Obtaining a new certificate
Performing the following challenges:
tls-sni-01 challenge for www.letsencrypt.work
Enabled Apache socache_shmcb module
Enabled Apache ssl module
Waiting for verification...
Cleaning up challenges
Created an SSL vhost at /etc/apache2/sites-available/000-default-le-ssl.conf
Enabled Apache socache_shmcb module
Enabled Apache ssl module
Deploying Certificate for www.letsencrypt.work to VirtualHost /etc/apache2/sites-available/000-default-le-ssl.conf
Enabling available site: /etc/apache2/sites-available/000-default-le-ssl.confPlease 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): 2
Enabled Apache rewrite module
Redirecting vhost in /etc/apache2/sites-available/000-default.conf to ssl vhost in /etc/apache2/sites-available/000-default-le-ssl.conf
-------------------------------------------------------------------------------
Congratulations! You have successfully enabled https://www.letsencrypt.workYou should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=www.letsencrypt.work
-------------------------------------------------------------------------------
IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
/etc/letsencrypt/live/www.letsencrypt.work/fullchain.pem
Your key file has been saved at:
/etc/letsencrypt/live/www.letsencrypt.work/privkey.pem
Your cert will expire on 2018-01-13. 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"
- 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

 

Congratulations!~」と表示されれば完了です!

また、証明の有効期間は90日間です。
90日後に期限が切れると、せっかく登録したhttpsからhttpへ戻ってしまうため、自動更新する設定も行いましょう!

先ほどの参考サイトより「証明書の更新」項目がありますので、設定を行います。

$ sudo certbot renew --dxry-run
Saving debug log to /var/log/letsencrypt/letsencrypt.log
-------------------------------------------------------------------------------
Processing /etc/letsencrypt/renewal/www.letsencrypt.work.conf
-------------------------------------------------------------------------------
Cert not due for renewal, but simulating renewal for dry run
Renewing an existing certificate
Performing the following challenges:
tls-sni-01 challenge for www.letsencrypt.work
Waiting for verification...
Cleaning up challenges
-------------------------------------------------------------------------------
new certificate deployed with reload of apache server; fullchain is
/etc/letsencrypt/live/www.letsencrypt.work/fullchain.pem
-------------------------------------------------------------------------------
** DRY RUN: simulating 'certbot renew' close to cert expiry
** (The test certificates below have not been saved.)
Congratulations, all renewals succeeded. The following certs have been renewed:
/etc/letsencrypt/live/www.letsencrypt.work/fullchain.pem (success)
** DRY RUN: simulating 'certbot renew' close to cert expiry
** (The test certificates above have not been saved.)

 

以下のコマンドをcronに登録します。

certbot renew

 

これで完了です!

「ブラウザのアドレスバー」にドメインを入力し、「https://」に変更されていたら成功です!

【ブラウザのアドレスバー】

データベースの作成

WordPressを利用するためにデータベースの作成を行います。
CloudGarageの「コンソール表示」より行います。
CloudGarageがタイムアウトしている可能性がありますのでリロードして再度ログインし、再起動(強制)を行なってください。

OSでLAMPを選択していましたので、すでにMySQLはインストールされている状態です。
ログインから行いましょう。

  1. MySQLにログイン
    root@tommy:~# mysql -u root -p
  2. 下記のように表示されたらログイン完了です。
    mysql>
  3. データベースを作成します。
    CREATE DATABASE test(作成したいデータベース名);
  4. ユーザーを作成

    GRANT ALL ON test.* TO 'tommy(任意のユーザー名)'@'localhost' IDENTIFIED BY '適当なパスワード';

これでデータベースの作成が完了です!

下記サイトを参考にしています。

参考 UbuntuにMySQLをインストールするところからテーブル作成までの方法プログラミングは芸術だ!

WordPressにデータベースを連携させましょう。

  1. 「ブラウザのアドレスバー」に「ドメイン名(今回であれば「tommy-design.work」)」を入力します。
  2. 「WordPressの画面」の「さぁはじめましょう!」を選択します。
  3. データベース接続のための情報を入力します。
    データベース名: test(3.データベースを作成で登録したデータベース名)
    ユーザー名: tommy(4.ユーザー作成で登録したユーザー名)
    パスワード: 適当なパスワード(4.ユーザー作成で登録したパスワード

    データベースのホスト名: localhost(そのままで可)
    テーブル接頭語: 
    wp_(そのままで可)
    上記の入力を終えたら、「送信」を押します。
  4. 「送信」が完了したら「wp-config.php」についての設定が表示されます。
  5. 表示されたwp-config.php」に関するソースコードを全てコピーし、テキストエディタへ貼り付け、wp-config.php」の名前で保存します。
  6. FTPソフトを利用し、/var/www/html/」にあるWordPressを入れている場所へ「wp-config.php」をアップロードします。
  7. アップロードしたら、WordPress画面の一番下にある「インストール実行」を押します。
  8. WordPressの登録を行います。
  9. WordPressへログインし管理画面が確認できれば成功です!

これで全て完了です!!!お疲れさまでした!!

まとめ

これでサーバー構築完璧です!!
サーバー構築だけでなく、ドメイン名取得やhttps化、データベース作成、WordPress導入まで一気に身につきましたね。

今回、この記事を書くために、3回ほど上記の工程を繰り返しました…(笑)
何事も理解するまでチャレンジすることが大切です!!

自分の本気メモですが、どなたかの役に立つと嬉しく思います。
一番役に立つのは、すぐに忘れやすい将来の自分でしょうけどね(笑)

この記事が気に入ったら
いいね ! しよう

Twitter で

2 COMMENTS

kanna

図も多くわかりやすいと思います!一つ補足したいのですが、
「証明書の更新」項目の所ですが、TOMMYさんの行った手順だと更新できるか検証しただけになっていると思われます。参考サイトを参照してみると、「証明書の更新設定は、renewのコマンドをcronに登録するだけです。」と記載がありますので、cronにcertbot renewを登録することで、定期的に更新する必要があるか確認&更新をしてもらえると思います。

返信する
tommy

ご指摘ありがとうございます!!
先ほど、該当箇所を追記させていただきました。
細かいところまで目を通していただき、本当にありがとうございます。

コメントでいただきました「cronにcertbot renewを登録することで、定期的に更新する必要があるか確認&更新をしてもらえると思います。」の一文ですが、ブログに追記したいのですが、このまま使わせていただくことは可能でしょうか。
よろしくお願いいたします。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)