【解説記事】Microsoft AzureでWordpressを一から構築して、外部テーマをFTP接続で読み込むまでの全て

米・東海岸時間の21日、午後11時59分〆切のアブストラクトを今慌てて書いて、アップロードした。時差があるから余裕・・・だとは思ったのだけど、相変わらずのぎりぎりでした。日系人ディアスポラがテーマなのだけど、他の人たちがどういうプレゼンでアプライしているのかわからないので不安。
わさらーのテーマのリミックスをアップロードしました! …わさびんびん~わさらーのtubuyaki~
これからvinylのMIXをアップロードしますら!テーマは何も考えない時に聴く音楽ら!

はじめに

みなさま、初めまして。
株式会社キカガク代表取締役の吉崎と申します。

現在、起業して5ヶ月が経ちました。
もともとエンジニア出身であるため、Rails等でWebアプリケーションの開発を自前で行うことができるのですが、いち早く公開→検証を行うためには、手段にはこだわらず、使えるものは使うといったスタンスであり、Webサイト構築にはよくWordPressを使用します。
WordPressブログホームページの作成によく用いられるPHPベースのCMS(Contents Management System)です。

WordPressはプログラミングができない人のためのサービスじゃないの?」と思われるかも知れませんが、プログラミングが出来る人にもかなりおすすめです。
小規模なWebサイトを自前組んだときに地味に大変なのが、見た目のフロント側を作ることでもなく、DBなどのサーバーサイド側でもなく、更新し続けること(更新するためのAdmin画面を作るのも面倒、、、)です。

と、言ったときに、そういった更新まで楽にできるWordpressが、特にスタートアップ系の素早く検証したいフェーズには、重宝します。

今回は、Microsoftが提供するクラウドコンピューティングサービスのAzureを使って、WordPressをインストールして構築するまでの手順をご紹介します。
本記事では、Azureのアカウントを持っている前提で進めますので、もしお持ちでない方はこちらより、アカウントの作成をお願いします。
最初は無料で始められますし、スタートアップ企業であれば、Bizsparkというプログラムでの優待もあるので、オススメです。

この記事を書こうと思ったきっかけですが、Wordpressをサーバーにインストールするといった記事はいくつか見つかるのですが、外部テーマまで読み込むといったところまで網羅されている記事がなかったため(が、実際には絶対に使う)です。
失敗談も少し挟んでいるので、今後のみなさまの学びになると幸いです。

Azureの設定(Wordpressのインスタンスを作成)

それでは、早速始めていきましょう。

インスタンスという言葉を聞きなれない方がいらっしゃるかもしれませんが、最初のうちはサーバー(自分の手元ではなく、どこかに置いてあるWebサイト用のコンピュータ)のことだと思っていただいて大丈夫です。
基本的には、Webサイト用のサーバーがなければWebサイトを公開することができないので、こういった契約が必要となります。
類似のサービスにはAmazonのAWSやGoogleのGCPがあり、他にもさくらインターネットのVPSやさくらのクラウドもあります。
こちらに関する議論は他の記事にたくさん書いてあるので、そこはメリット・デメリットを考慮しながら選んでみてください。

Azure上に、Wordpress用の環境が揃っているので、こちらを使用してWordpressのWebサイトを作成していきます。

1.jpg

「作成」を押すと、次に下記のような画面が出てくるので、必要な事項を入力しましょう。

2.jpg

利用条件に応じて、DBの料金なども設定していきます。
とりあえず小規模で運営し始めたいという方は標準の設定で良いかと思います。

作成を行うと自動的にデプロイが開始されます。
右上のデプロイ状況が完了するまで数分間待ちましょう。

3.jpg

WordPressの設定

デプロイが完了すると、下記のようなリソースの画面に入れます。

貼り付けた画像_2017_06_19_13_51.jpg

このURLにアクセスすると、Wordpressの初期設定が始まります。

スクリーンショット 2017-06-15 17.39.00.png

5.jpg

6.jpg

これで完了です。非常に楽でした。

外部テーマをアップロード

ブラウザ経由でのアップロードでエラー

外部で購入したテーマをアップロードする場合、一番簡単な方法は
「外観」 → 「テーマ」
からzip形式のwordpress用テーマをアップロードします。

1.jpg

アップロードが完了したかと思いきや、なぜか「本当にじっこうしていいですか?もう一度お試しください。」といったエラーに遭遇。

スクリーンショット 2017-06-15 18.45.39.png

なぜかと調べてみると、PHPが制限しているアップロード容量をオーバーしているとのことのようです。
※ 容量が小さい場合はうまくアップロード出来るかと思います。今回は9.2MBのファイルでアップロードができませんでした。

ブラウザ(HTTP)経由でのアップロードができないのであれば、FTPなど別の方法で送るしかありません。
さくらのVPS等であれば、scpでさくっと送っちゃえるのですが、Azureではそういったサーバーの中を触らなくて良い反面、そういったことがさくっとできない弱点があり辛いです。。。

FTP接続を試す

FTP接続を行うためには、Azure側で設定をしていく必要があります。
デプロイ資格情報からFTPの設定を行いましょう。

3.jpg

この資格情報を保存後、概要の画面から発行プロファイルの取得を行いましょう。

3.jpg

発行プロファイルをローカルのPCにダウンロードすることができます。
このダウンロードした発行プロファイルをテキストエディター(メモ帳など)で見てみると、以下のような情報が記載されています。
※ 通常はベタ書きになっていますが、見やすいように空白区切りで改行しています。

3.jpg

色々と書いてありますが、FTP接続に必要なのは以下の3つの情報です。

  • publishUrl
  • userName($以降の$を覗いた部分がユーザー名)
  • userPWD

ここで注意点として、FTP の部分から上記の3つを取得してくることです。
紛らわしいことにこのファイルの中には、FTPの前に Web という項目もあり、こちら側ではありませんのでお気をつけください。

FTPへの接続のための情報を入手したら、あとは各々使い慣れているツールでサーバーへ接続していきます。
今回は、Macで説明を行いますが、Windowsの方も同じソフトウェアを使えますので、手順はほとんど変わらないと思います。

FTPで接続する

下記に失敗した様子を書いているのですが、MacのFinderでFTP接続を行うとデータの送信には対応していないらしく、別のCyberduckというアプリケーションを使用していきます。
AppStoreからダウンロードしようとすると、2900円となっておりましたが、Cyberduck 公式ホームページからであれば、無料版もありますので、そちらからダウンロードを行ってください。

2.jpg

ダウロード後にはCyberduckを実行します。

Cyberduck.jpg

新規接続を選択し、下記の画面でメモをした publishUrl と userNameuserPWD を順番に入力して接続します。

Cyberduck_と_メモ.jpg

と、順調に接続できるかと思いきや、純粋に publishUrl にアクセスしただけではうまく接続できず、こけてしまいます。
publishUrl ではドメインだけでなく、そのディレクトリの中にアクセスできる場所まで記載されているのですが、これがCyberduckにとってはだめなようです。

publishUrlwaws-prod- ... windows.net ここまでにして、Cyberduckeのサーバーとして情報を入力してあげれば、接続が通るはずです。

kikagaku-seminar-ms_waws-prod-sn1-129_ftp_azurewebsites_windows_net_–_FTP_と_メモ_と_ryosuke_—_-bash_—_80×24.jpg

あとは、以下のようにディレクトリを辿り、Wordpressテーマをドラッグ&ドロップでコピーします。
site (このときにユーザー情報の確認が入った) → wwwrootwp-contentthemes (外部テーマ用のディレクトリ) → ここにzipから解凍したWordpressテーマを置く。

テーマをこちらのディレクトリにコピーした後に、Wordpress側からテーマを確認すると、無事インストール(というよりも読み込み)が完了しています。

(失敗)FinderでFTP接続するもコピーはできない

command + K でサーバーへ接続するためのアプリケーションが立ち上がるので、あとはここに publishUrl を入力します。

サーバへ接続_と_メモ.jpg

そうすると、接続するユーザー名とパスワードが聞かれるので、userNameuserPWDを入力して接続すれば、完了です。

うまくいけばこのように、サーバー上のファイルにアクセスできます。

スクリーンショット 2017-06-15 19.30.34.png

ここに、外部のWordpressテーマを置く場合は、
wp-contentthemes → ここに置く
とすればOKです。

と、言いたいところでしたが、ここで1つ失敗があり、MacのFinderでのFTP接続はダウンロードのみをサポートしており、データ送信が行えないとのこと。とほほ。。。という失敗談でした。

おわりに

Microsoft Azureは外部テーマを読み込むときにこそ、少し手間が発生しましたが、Wordpressをインストールするとことまでであれば、GUIのみで非常に簡単に実装することができました。
インフラ側に触れることなく大きなサービスを展開できることはアウトプット重視の社会人にとっては非常に良いことであり、慣れてきたタイミングでインフラを学び、さらに深めていくという流れで良いと思います。
どんどん便利になるサービスと共に、素晴らしいWebライフを!

ご協力お願いします!

こちらの記事が参考になった方は、こちらの記事に『いいね』をしていただけると嬉しいです。

著者紹介

02.jpg

私は株式会社キカガク代表取締役の吉崎亮介と申します。
現在は『機械学習・人工知能 脱ブラックボックスセミナー』を運営しております。
少子高齢化社会が目前に迫っている日本において労働力の確保が大きな問題であり、それを解決する可能性を秘めた人工知能(AI)技術をたくさんの方に広め、AI技術の底上げを目指すべく、ビジネスマン向けの教育に専念しています。

経歴

所属 学科・部署 研究内容 賞罰
舞鶴高専 電子制御工学科 画像処理(AR)を研究
舞鶴高専 電気・制御システム工学専攻 ロボット工学・システム制御・最適化を研究
京都大学大学院 情報学研究科(加納研 製造業に向けた機械学習の応用研究 ADCHEM2016最優秀論文賞、化学工学会技術賞
株式会社SHIFT 社長室 人工知能によるソフトウェアテスト自動化の研究 CEDEC2016登壇
株式会社Carat 取締役兼COO 最適な旅程提案アプリ(自然言語処理・最適化)
株式会社キカガク 代表取締役社長 人工知能・機械学習セミナー SOMPOホールディングス主催 Data Science Bootcamp メンター

株式会社キカガク

logo_horizontal.png

機械学習や人工知能の教育サービスを提供
日本マイクロソフト認定 深層学習トレーニング協力企業

フォローお待ちしております

ビジネス目線の機械学習・人工知能の情報やオススメの参考書について発信しています。

代表取締役社長 吉崎 亮介
Twitter:@yoshizaki_kkgk
Facebook:@ryosuke.yoshizaki
Blog:キカガク代表のブログ

  • コメント

    1. 匿名希望
      2017/08/21(月) 23:59:38

      米・東海岸時間の21日、午後11時59分〆切のアブストラクトを今慌てて書いて、アップロードした。時差があるから余裕・・・だとは思ったのだけど、相変わらずのぎりぎりでした。日系人ディアスポラがテーマなのだけど、他の人たちがどういうプレゼンでアプライしているのかわからないので不安。

    2. 匿名希望
      2017/08/21(月) 23:59:38

      わさらーのテーマのリミックスをアップロードしました! …わさびんびん~わさらーのtubuyaki~

    3. 匿名希望
      2017/08/21(月) 23:59:38

      これからvinylのMIXをアップロードしますら!テーマは何も考えない時に聴く音楽ら!

    記事に戻る

関連記事