【クラウド初心者向け】Google Cloud Platform(GCP)でWebサイトを公開してみよう!
- データベース, ネットワーク, 運用管理, 開発ツール Google Cloud DNS, Google Cloud Platform, Google Cloud SQL, Google Compute Engine, Infra, MySQL, php, クラウド, 開発
はじめに
みなさんこんにちは、プロダクト開発本部の亀梨です。
普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う
統合プラットフォームの開発を担当しています。
背景
わたくしは最近プライベートで開発したWebサービスをインターネット上に公開しました。
その際にインフラ環境をどうやって構築しようかなーと思ったのですが、レンタルサーバーだとエンジニアとしてどうかなと思ったのと、AWSは普段の開発で触れているのとネット上に知見が貯まりまくっているのでつまらないなーと思ったので、今回は今まで触ったことのなかったGoogle Cloud Platform(GCP)を使って環境構築にトライすることに決めました。
非常に簡単に環境を構築することができたので、同じようにGCPやクラウド使ってみたいというビギナーの方向けにナレッジを共有できればと思い本記事を書くことにしました。
前提 – Webサイトを公開するために必要な環境
Webサイトを公開するにあたっては、最低限以下の環境が必要になってきます。
- Webサーバー
- 作成したHTML/CSS等ファイルのインターネット上の置き場所
- DB(データベース)サーバー
- サイトに必要なデータの保存場所
- DNS(ドメインネームシステム)
- インターネット上の住所、ドメイン(当サイトでいうhttp://yebisupress.dac.co.jp)とIPアドレス(インターネット上の住所のコンピュータが認識できる形式)を紐付けるシステム
これら必要な環境をすべてGoogle Cloud Platform上の各種サービスでまかないたいと思います。
Google Cloud Platformとは
Google Cloud Platform(GCP) とは、Google がクラウド上で提供するサービス群の総称です。
Google 社内で使われているものと同じテクノロジーやインフラを使用して、お客様のインフラ環境をクラウド化できます。
基本的な構成要素が初めから各種サービスとして用意されているため、それらを使用してすばやく開発を行うことができます。
それではWebサイトを公開するために必要な各種サービスを詳しく見ていきましょう。
Google Compute Engine(GCE)
前提で挙げたWebサーバーにあたるものがこちらで、AWSでいうEC2に相当するものとなります。
特徴は何といっても、 Google が実際に運用環境で使用している強力なインフラの上で動くということでしょう。
GCE のインスタンスは Google の高品質なインフラ上で動作するため、高いネットワーク性能や物理的にセキュアな環境に置かれることといった利点が期待できます。
Google Cloud SQL
前提で挙げたDBサーバーにあたるものがこちらで、AWSでいうRDSに相当するものとなります。
クラウド上の PostgreSQL と MySQL のリレーショナル データベースを簡単に設定、維持、運用、管理できるようにするフルマネージド データベース サービスです。
Google Cloud DNS
前提で挙げたDNSにあたるものがこちらとなります。
ドメイン名・IPアドレスを変換するDNSの基本機能です。Google社が自社サービス用として、世界中にあるDNSサーバーを使用し、あらゆる地域からのDNSルックアップをサポートしているので、高い拡張性・可用性があります。
いざ実践
それでは早速GCPの登録と各種サービスの設定を行ってまいりましょう。
今回は、
- Googleのアカウントを持っていること
- 開発言語はPHP
- DBはMySQL
であることを前提とします。
GCPの登録、新規プロジェクトの作成
こちらからアクセスしてスタートページに進みます。
GCPを初めて利用する場合は12ヶ月間の無料トライアルを利用できるので、まずはこちらを登録していきましょう。
「無料トライアルをお試しください」をクリックすると登録画面に進みます。
必須事項を選択し「同意して続行」ボタンをクリックすると、次の画面でアカウントの氏名、住所、クレジットカード情報を入力したら「無料トライアルを開始」ボタンをクリックします。
無料トライアルのエントリーが完了すると、「Google Cloud Platform コンソール」に切り替わり登録が完了します。
次にホーム画面から新規プロジェクトを作成します。
適当なプロジェクト名を入力して「作成」ボタンをクリックします。完了するまで少し時間がかかる場合があります。
プロジェクトの作成が終わるとそのプロジェクトのダッシュボード画面が表示されます。
これで完了です。
Google Compute Engineインスタンスを作成する
では次にGCEでWebサーバーを構築してみましょう。以下の環境を順番に作っていきます。
- OS:CentOS7
- Webサーバー:Apache
- 開発言語:PHP7
- DB:MySQL(後述のGoogle Cloud SQL接続用)
CentOS7インスタンスの立ち上げ
まずナビゲーションメニューよりGCEの管理画面に遷移します。
画面中央の「作成」をクリックします。
入力画面が表示されたら、名前を好きな名前に、リージョンを「asia-northeast1(東京)」、ブートディスクを「CentOS7」、ファイアウォールを「HTTPトラフィックを許可する」にチェックを付けて最後に「作成」ボタンをクリックします。
作成したインスタンスが、GCEのインスタンス一覧画面に表示されます。
この状態ですでにグローバルIPアドレスが割り当てられており、SSHで接続することができます。
では自分のPCから作成したインスタンスにSSH接続するために公開鍵を登録します。左メニューの「メタデータ」をクリックします。
メタデータの画面で「SSH認証鍵」タブをクリック→「SSH認証鍵を追加」をクリックします。
入力フィールドにSSH公開鍵を入力し保存をクリックします。
保存が完了すると一覧に表示されます。
それでは準備が整ったのでMacのターミナルでGCEインスタンスにSSH接続してみましょう。
1 2 3 4 5 6 |
[ko-kamenashi@instance-1 ~]$ ssh ko-kamenashi@99.999.99.999 The authenticity of host '35.200.43.162 (35.200.43.162)' can't be established. ECDSA key fingerprint is SHA256:wVAPomp+R1Nhs48DEc6uOyACgmyh6vIzauOakueR5XY. Are you sure you want to continue connecting (yes/no)? yes Warning: Permanently added '35.200.43.162' (ECDSA) to the list of known hosts. [ko-kamenashi@instance-1 ~]$ |
はい、無事に接続ができました。
Apache(Webサーバー)のインストール
ではこのCentOS7インスタンス環境に、yum経由でまずはApacheをインストールしていきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
[ko-kamenashi@instance-1 ~]$ sudo yum install httpd . . . ============================================================================================================================================================ Package Arch Version Repository Size ============================================================================================================================================================ Installing: httpd x86_64 2.4.6-80.el7.centos.1 updates 2.7 M Installing for dependencies: apr x86_64 1.4.8-3.el7_4.1 base 103 k apr-util x86_64 1.5.2-6.el7 base 92 k httpd-tools x86_64 2.4.6-80.el7.centos.1 updates 90 k mailcap noarch 2.1.41-2.el7 base 31 k Transaction Summary ============================================================================================================================================================ Install 1 Package (+4 Dependent packages) Total download size: 3.0 M Installed size: 10 M Is this ok [y/d/N]: y . . . Complete! [ko-kamenashi@instance-1 ~]$ |
インストールしたら次は自動起動の設定をしておいた上で、実際にApacheを起動してみます。
1 2 3 4 5 6 7 |
[ko-kamenashi@instance-1 ~]$ sudo systemctl enable httpd.service Created symlink from /etc/systemd/system/multi-user.target.wants/httpd.service to /usr/lib/systemd/system/httpd.service. [ko-kamenashi@instance-1 ~]$ sudo systemctl start httpd.service [ko-kamenashi@instance-1 ~]$ sudo systemctl status httpd.service ● httpd.service - The Apache HTTP Server Loaded: loaded (/usr/lib/systemd/system/httpd.service; enabled; vendor preset: disabled) Active: active (running) since Fri 2018-08-03 09:57:34 UTC; 8s ago |
起動したら、早速ブラウザからIPアドレスでアクセスしてみましょう。
Apacheのテストページが表示されたら成功です。
はい、成功です。
PHP7のインストール
続いてはPHPのインストールです。
CentOS7系の標準リポジトリのPHPバージョンは5.4で、それ以外のバージョンを使用したい場合は、EPELリポジトリとRemiリポジトリの追加が必要になります(EPELはこのCentOS7インスタンスにプリインストール済)。順にインストールしていきます。
1 2 3 4 5 6 |
[ko-kamenashi@instance-1 ~]$ sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm Retrieving http://rpms.famillecollet.com/enterprise/remi-release-7.rpm warning: /var/tmp/rpm-tmp.ScWWHz: Header V4 DSA/SHA1 Signature, key ID 00f97f56: NOKEY Preparing... ################################# [100%] Updating / installing... 1:remi-release-7.5-2.el7.remi ################################# [100%] |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
[ko-kamenashi@instance-1 ~]$ sudo yum install --enablerepo=remi,remi-php70 php php-devel php-mbstring php-pdo php-gd . . . ============================================================================================================================================================ Package Arch Version Repository Size ============================================================================================================================================================ Installing: php x86_64 7.0.31-1.el7.remi remi-php70 2.6 M php-devel x86_64 7.0.31-1.el7.remi remi-php70 1.0 M php-gd x86_64 7.0.31-1.el7.remi remi-php70 72 k php-mbstring x86_64 7.0.31-1.el7.remi remi-php70 572 k php-pdo x86_64 7.0.31-1.el7.remi remi-php70 122 k Installing for dependencies: ... ============================================================================================================================================================ Install 5 Packages (+24 Dependent packages) . . . Complete! [ko-kamenashi@instance-1 ~]$ php -v PHP 7.0.31 (cli) (built: Jul 17 2018 15:30:29) ( NTS ) Copyright (c) 1997-2017 The PHP Group Zend Engine v3.0.0, Copyright (c) 1998-2017 Zend Technologies [ko-kamenashi@instance-1 ~]$ |
はい、無事にインストールができてバージョンも確認ができました。
次にPHPの設定ファイルでタイムゾーンを設定し、その設定を反映させるためApacheを再起動しておきます。
1 2 3 4 5 6 7 |
[ko-kamenashi@instance-1 ~]$ sudo vim /etc/php.ini #php.ini ... date.timezone = "Asia/Tokyo" ... [ko-kamenashi@instance-1 ~]$ sudo systemctl restart httpd.service |
これで準備万端ということで、ドキュメントルートにphpinfoを出力するphpファイルを作成します。
1 |
[ko-kamenashi@instance-1 ~]$ sudo vim /var/www/html/phpinfo.php |
1 2 3 4 5 6 |
//phpinfo.php <?php phpinfo(); ?> |
それではブラウザからphpinfo.phpにアクセスしてみましょう。
はい、これでPHPが使えることが確認できましたね。
MySQLのインストール
GCEパートはここで最後です。もう一息。
MySQLは実際は後述のGoogle Cloud SQL上のMySQLを使用しますが、このGCEインスタンスからGoogle Cloud SQLインスタンスに接続するためにMySQLコマンドを使う必要があるため、ここでインストールしておく必要があります。
ターミナルからGCEインスタンスに接続した状態で、yum経由でインストールします。
なおCentOS7にプリインストールされているmariaDBがMySQLと競合を起こすため、まず初めにmariaDBのアンインストール→MySQLインストールという流れが必須です。インストール後の自動起動設定と起動も合わせてやってしまいます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
[ko-kamenashi@instance-1 ~]$ sudo yum remove mariadb-libs . . . Complete! [ko-kamenashi@instance-1 ~]$ sudo yum localinstall http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm . . . Complete! $ sudo yum install mysql-community-server . . . Complete! [ko-kamenashi@instance-1 ~]$ mysqld --version mysqld Ver 5.7.23 for Linux on x86_64 (MySQL Community Server (GPL)) [ko-kamenashi@instance-1 ~]$ sudo systemctl enable mysqld.service [ko-kamenashi@instance-1 ~]$ sudo systemctl start mysqld.service [ko-kamenashi@instance-1 ~]$ sudo systemctl status mysqld.service ● mysqld.service - MySQL Server Loaded: loaded (/usr/lib/systemd/system/mysqld.service; enabled; vendor preset: disabled) Active: active (running) since Fri 2018-08-03 12:23:33 UTC; 5s ago . . . |
無事インストールができ、起動することもできました。これでGCEパートは以上となります。
Google Cloud SQLインスタンスを作成する
さて、続いてはDBサーバーとなるGoogle Cloud SQLインスタンスを作成していきます。
まずはダッシュボードの左ナビゲーションメニューより「SQL」をクリックします。
次の画面で「インスタンスを作成」をクリックします。
データベース選択画面で、「MySQL」を選択した状態で「次へ」をクリックします。
MySQLインスタンスタイプ選択画面で、「第2世代を選択」をクリックします。
次の画面で、インスタンスIDに好きなID名を、rootパスワードを入力、ロケーションのリージョンとゾーンはGCEインスタンスと揃える形で設定した上で「作成」ボタンをクリックします。
作成が完了すると、Google Cloud SQLダッシュボードの一覧に表示されます。
ここからインスタンスIDをクリックすると詳細画面に遷移します。
と、ここで大事な設定を行います。
詳細画面では、このGoogle Cloud SQLインスタンスが先に作成したGCEインスタンスからしか接続できないようにしてセキュリティを担保する設定を行います。承認タブよりGCEインスタンスのIPアドレスを追加し「完了」→「保存」ボタンをクリックします。
これでGoogle Cloud SQLの設定はすべて完了です。それでは接続を試してみましょう。
ターミナルからGCEインスタンスに接続→GCEインスタンスからGoogle Cloud SQLインスタンスのMySQLに接続してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
AABBCCDDEEFF:~ ko-kamenashi$ ssh ko-kamenashi@99.999.99.999 Last login: Fri Aug 3 12:57:09 2018 from fs276edaa2.tkyc002.ap.nuro.jp [ko-kamenashi@instance-1 ~]$ mysql -h 00.000.00.00 -u root -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 492 Server version: 5.7.14-google-log (Google) Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement. mysql> |
はい、無事に接続できました。
PHPコード上からDBに接続する際はホスト名にCloud SQLのIPアドレスを設定すれば接続することができます。
補足としてGUIツールからGCEインスタンス経由でGoogle Cloud SQLに接続する方法も記しておきます。以下キャプチャーはMySQLの「Sequel Pro」というGUIツールですが、このように設定することで接続することができます。
Google Cloud DNSの設定
さてさてようやくラストパート、DNSの設定です。
ここではDNSの設定に必要な、
- DNSゾーンの作成
- Aレコードの追加
- レジストラへの登録
というのを順に行っていきます。DNSに関する詳細な説明は省きますが、ネット上にたくさんの有益な記事がありますので、不明な点はググっていただければと思います。
DNSゾーンの作成
まずはダッシュボードの左ナビゲーションメニューより「ネットワークサービス」>「Cloud DNS」をクリックします。
GCDNS一覧画面で「ゾーンを作成」をクリックします。
ゾーン作成画面で、適当なゾーン名を入力し、DNS名に設定したいドメイン名を入力した上で「作成」をクリックします。
ゾーンが作成されると詳細画面にNSレコードとSOAレコードが作成された状態で表示されます。
Aレコードの追加
次にAレコードを追加するために、ゾーン詳細画面より「レコードセットを追加」をクリックし、入力画面でDNS名にwwwを追記(wwwなしでアクセスさせたい場合は何も入力しない)、リソースレコードのタイプが「A」となっていることを確認、IPv4アドレスにGCEインスタンスのグローバルIPアドレスを入力した上で「作成」ボタンをクリックします。
Aレコードが作成されるとゾーン詳細画面で確認ができます。
これでGoogle Cloud DNS上での設定は完了です。
レジストラへの登録
Cloud DNSで登録したドメインのDNSサーバーを、レジストラ(お名前.com等のドメイン管理機関)のネームサーバーに指定する必要があります。
先程のゾーンに設定された以下のNSレコードにある4つのDNSサーバーを登録します。
これにより、他のDNSサーバーに対して、指定したドメイン情報は上記のDNSサーバーで管理されているという情報が、レジストラのDNSサーバーから伝達されるようになります。ただし、全てのDNSサーバーに情報が伝達されるには、しばらく時間がかかります。
仮にお名前.comでドメインを取得した場合は、お名前.comでのネームサーバーの変更を参照しながら設定をしてみてください。設定後しばらくしたらブラウザから設定したドメイン(URL)にアクセスして正しくページが表示されるか確認してみてください。
以上です。
というわけで、Compute Engine、 Cloud SQL、Coud DNSの設定が完了しWebサイトが公開できる環境が構築できました。
画面キャプチャーが多くなってしまったのでページが長くなってしまいましたが、設定自体はそれほど項目数が多いわけでもなくGCPに慣れていない方でも簡単に設定できるかと思います。個人的にはAWSよりUIが分かりやすくて設定しやすいので今回のトライでGCP大好きになりました。
今回紹介したサービス以外にもできることがたくさんありますので、自分もこれからもっともっとGCPを活用していければと思っています。また知見が貯まりましたら当ブログで紹介していきます。それではまたー。

関連記事
-
-
最強のSQLクライアント(GUIツール)「TeamSQL」を使ってみた!
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 エンジニアの皆さん、SQLクライアント(GUIツール)って何使ってます? わたくしはこ …
-
-
ゼロからAngularでSPAを作ってみた(2) デプロイ・公開編
前回のおさらいと今回やること 前回(はじめてのアプリ編)では、Angular で簡単なチャットアプリを作るところまでやりました。ディレクトリ構成については説明できていなかったのですが、次のようになっています。(主なディレクトリとファイルのみ抜粋) + dist (ビルド・コンパイル後のファイルのディ …
-
-
初心者がRailsで開発 – deviseでユーザー認証設定 –
こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します!! 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …
-
-
【小ネタ】タスク管理ツール移行: Trello から Asana
プロジェクトチームのタスク管理ツールを Trello から Asana に変えることになり、 タスクの移行が意外と簡単にできた、というお話です。 Trello と Asana もともと使っていたのは Trello(トレロ)です。 プロジェクト > タスクグループ > タスク …
-
-
modern.IEを使ってMac上でWindows10を動かす
Microsoftが提供している modern.IE というプロジェクトがある。そこで提供されている仮想環境を使って、MacにWindows10をインストールしてみる。ちなみに、このプロジェクトの本来の目的はInternet Explorerの表示確認やデバッグの支援。 VirtualBoxの準備 …
-
-
slack×Nagiosでアラートをプッシュ通知
DACではサーバ・NW機器のリソースの監視に「Nagios」を利用してます。 監視ホストも数百台規模で増え続けており、アラート検知が非常に重要な課題となってきています。 メールの通知では、各MLを通知先に設定して、フィルタ分けして…と何かと面倒ですね。 そこで「slackへアラート内容を …
-
-
Charlesを使ってスマホアプリ(iOS)のUAを調べてみた
はじめに ここ最近のスマホアプリには、Webブラウザの機能を実装したものが少なくありません。 (“スマホアプリ内で立ち上がるブラウザ「アプリ内ブラウザ」”の機能は「WebView」というコンポーネントを用いて実装されています。) 昨今のWebサイト、サービス運営に於いて、「通 …
-
-
ゼロからAngularでSPAを作ってみた(3) CI: 継続的インテグレーション編
前回までのおさらいと今回やること 前々回(はじめてのアプリ編)と前回(デプロイ・公開編)で、作成した Angular のチャットアプリを Web に公開するところまでいきました。 でも、デプロイするのに、毎回決まったコマンドを打つのって面倒ですよね。 今回は GitHub でソースコードを管理して、 …
-
-
AWSにRailsアプリをデプロイする(公開編)
次にデプロイするため“aws rails デプロイ”でググってみるとunicorn、nginxというキーワードがでてくるので とりあえずこれを設定していきます。 アプリのsecret_key_baseの設定 [crayon-603b6c930d09f731589 …
-
-
GoogleスプレッドシートからTreasureDataへデータを取り込む
AudienceOneの開発を担当しています。skryoです。 またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。 なぜ? Googleスプレッドシート上でマ …