注目キーワード

XSERVERでのWebアプリケーション(Flask)の環境構築

こんにちは、Tamagoです。

Flask(Python)を使ったWebアプリケーションを作りたかったので、備忘録として構築手順をまとめました。

この記事を読みながら、環境構築を行うことでFlaskをXSERVER上で起動させることが出来きます。

一応証跡を載せておきます以下のリンクにアクセスすると「Hello,World!」と書いたメッセが表示されているはずです。

https://nekopy-work.com/flask_sample/

各リンクの記事で多くの画像を載せながら説明していますので、リンクを見ながら環境構築を行ってみてください。

費用の話

この記事で取り扱う「XSERVER」と「ドメイン」は契約が必要になります。

既に持っている場合は、新たに契約する必要はありません。

XSERVERについて

私の場合は、ブログで使っていた「XSERVER」を使ってFlaskの環境構築を行っていますが、値段で迷っているなら、投資だとおもって契約することをおすすめします。使い道はたくさんあるので・・・

XSERVERは月契約のプランがあります。

初回契約の最安値のプランだと3カ月の契約で6,600円(税抜)となります。

内訳は初期費用が3,000円、月当たりの使用料が1,200円×3で3,600円で6,600円です。

レンタルサーバーはプログラムだけでなくブログなどの他の用途でも使えますし、初期費用をのぞけば月々約1,000円と、月々たった1,000円投資するだけで環境構築のスキルが身につくならぜんぜんありなのかなと思います。

現場に出てみるとプログラムは書けるけど環境構築できる人って少ないのでかなり差がつくと思います。

ドメインについて

XSERVERを契約するとデフォルトのドメインが付いてくるはずですが、別の用途で使っていたため新たに契約しました。

まあ、これも年間契約で780円〜2,000円と月換算すると200円未満なので深く考えずに登録してもいいんじゃないかなと思います。

私も今後Flaskでサンプルを紹介していくために新たに登録しました。

おおまかな流れ

Flaskの起動手順としては開発したプログラムをLinux(XSERVER)に配置して、特定のURLへアクセスするといった流れです。

今回は、サーバーの契約や上記でいうURLの設定もあわせておこないます。

  1. XSERVERの登録
  2. ドメインの取得
  3. ドメイン設定
  4. Python2からPython3へアップグレード
  5. ソースコードの配置・プログラムの実行

1→Flaskを動かすためのサーバー(Linux)の契約をします。

2,3→取得したドメインを契約したサーバと紐づけます。

4→XSERVERには2系のPythonがインストールされているのですが、Flaskは3系でしか使えないのでアップグレードします。

5→今回の記事で紹介するFlaskの簡単なサンプルソースをサーバー上に配置します。配置したら勝手に動くので、設定したURLにアクセス。

XSERVERの登録

XSERVERの管理画面で操作をする必要があるので登録していない人は以下のリンクから登録お願いします。

エックスサーバー

登録完了して、「 【Xserver】■重要■サーバーアカウント設定完了のお知らせ 〜」といったメールを受け取ったら、メール内のurlからサーバーパネルにログインできるようになります。

メールを受けっとったらこの記事に戻ってきてください。

ドメインの取得

つぎは、ドメインの取得です。

ドメインの取得は必須ではないですが、デフォルトのドメインが「〇〇.xsrv.jp」が嫌だとか、既に使ってしまっている場合は、以下のリンクからドメインを取得してください。

お名前.com

サーバーは既に「XSERVER」で契約しているのでドメインの取得のみで、こちらでもサーバーの契約はする必要はありません。

登録完了すると、「お名前.com」から4件くらいまとめてメールが来ます。

「 [お名前.com]ドメイン自動更新 設定完了 登録したドメイン 」という件名のメールを受け取ったらこの記事に戻ってきてください。

ドメイン設定(XSERVER)

取得したドメインとXSERVERを紐づけるために設定を行います。

結構長かったので別の記事に切り出しました。かなり詳しく書いておきました。

お名前.comで取得したドメインをXSERVERに紐づける手順」を参照してください。

記事の最後まで行って、取得したドメインにアクセスすると「エックスサーバー」のデフォルトのページが表示されるようになったらこの記事に戻ってきてください。

Python2からPython3へアップグレード

FlaskをXSERVER上で動かすには、2系のPythonから3系のPythonにする必要があるので以下の記事でアップグレードしましょう。

XSERVERにPython3を入れてみた

記事中の最後「pip install flask」を叩いて、Flaskをインストールしたらこの記事に戻ってきてください。

pip install flask

ソースコードの配置・プログラムの実行

これで残るはファイルの配置とプログラムの実行です。

ファイルの配置はFFFTPというツールを使って配置します。

インストールおよび、接続方法は以下の記事を参照してください。

「XSERVERにFFFTPで接続する方法」

配置するフォルダについて

FFFTPで接続したら、ドメイン名と同じ名前のフォルダがあるはずです。

フォルダをクリックして さらに中身をみると「public_html」が存在するはずです。

クリックして「public_html」の中に入りましょう。

nekopy-work.com

そうすると、以下のファイルが置かれています。

ここのフォルダは「 https://nekopy-work.com 」にアクセスすると表示されるサイトのファイルが配置されています。

今後複数のサンプルファイルを置きたかったのでここのフォルダに「flask_sample」というフォルダを作ります。

スポンサーリンク

そうすることで 「 https://nekopy-work.com/flask_sample/」 にアクセスしたときにこれから紹介するFlaskが起動します。

public_html

フォルダを追加するには、右クリックをおして赤枠で囲った「フォルダ作成」を選択します。

右クリック

そうするとフォルダ名を聞かれるので「flask_sample」と入力します。

フォルダ名設定

フォルダが作成されました。

フォルダ追加

ファイルの配置

配置するファイルは以下の3ファイルです。

  • .htaccess
  • index.cgi
  • HelloFlask.py

作成した3ファイルを 「flask_sample」の配下にドラックアンドドロップで配置しましょう。

.htaccess

[gist id=”b20dc2339aa5a63c5d903466e3deaf3c” filename=”.htaccess” hightline_line=”3″ ]

「.htaccess」はアクセスする際に起動するファイルのパスを示しています。注意点は3行目の「/flask_smple」と言うところで、配置するフォルダ名と一致させておきます。

index.cgi

[gist id=”b20dc2339aa5a63c5d903466e3deaf3c” filename=”index.cgi” hightline_line=”1,3″ ]

「index.cgi」は2つ注意点があります。

1行目の「 /home/XXXX/.linuxbrew/bin/python 」はPythonのパスです。

「XXXX」の部分はXSERVERのIDなので変更する必要があります。

紹介した大中通りに操作すれば「XXXX」の部分だけ変更すれば動くはずです。

3行目の「 from helloFlask import app 」は「 from ファイル名 import 変数名 」となっています。

そのままで動くはずですが、別のファイル名で実行したい場合は気を付けましょう。

helloFlask.py

[gist id=”b20dc2339aa5a63c5d903466e3deaf3c” filename=”helloFlask.py” ]

パーミッションの設定

配置したままだと起動しないのでパーミッションを変更します。

「index.cgi」に実行権限を付ければいいのですが一応お作法で以下のように変更します。

  • .htaccessを644
  • index.cgiを755
  • helloFlask.pyを644

変更方法は対象ファイルを選択した状態で「右クリック」から「属性変更」を選択します。

右クリック

そして「 index.cgi 」のパーミッションを「755」その他を「644」に変更します。

赤枠のところに数字を入れてOKを押せば変更できます。

属性が以下の図のようになればOKです。

URLにアクセス

後は、URLにアクセスすれば以下のように「Hello,World!」とメッセージが表示されているはずです。

https://nekopy-work.com/flask_sample/

おわりに

最後まで読んでくださってありがとうございます。

当ブログでは、Python特化した記事を多く投稿しています。よかったら、他の記事も読んでみてください。

どの記事もできるだけ分かりやすく画像を載せて説明してあります。

また、Pyhtonに関するお仕事の依頼はサイドバーの「coconala」からお待ちしております。

「 学習のサポート 」や「 ツールの作成 」気軽にご相談ください。