XserverVPSでFlaskアプリを公開する方法を紹介します【Nginx/MySQL/uWSGI】

Flaskで作成したアプリケーションを公開しようと思っても、全体の流れが掴めていないといまいちピンとこないですよね。

そこでこの記事ではFlaskで作成したアプリケーションをXserverVPSで公開するということをやっていきます。

XserverVPSでFlaskアプリを公開したいという方は参考にしてみてください。

XserverVPSでFlaskアプリを公開していこう。

公開するFlaskアプリケーション

Flaskで作成したシンプルなTodoアプリを例にとってXserverVPSで公開してみます。

構築する環境

Flaskアプリケーションを公開する環境としては以下のものを使います。

そうだね、上記のもので環境作ってアプリケーションを動かすよ。

早速やっていきましょう。

XserverVPSでサーバーを立てる

まずはXserver VPSでサーバーを立てます。プランはいくつかあるけど、2GBがおすすめです。VPSを申し込む際の画面は以下。

OSは今回はUbuntuでやろうと思います。このOSは後で変更できないの？と思うかもしれませんが、後でもOSの再インストールをすることができます。

もし申し込み方法に悩んだら以下の記事に書いているのでどうぞ。

【手順解説】エックスサーバーVPSの申し込み方法と始め方を紹介します。

2022.12.21

エックスサーバーVPS使ってみたいんだけどどう始めたらいいんだろう？ そんな疑問を解消するためにこの記事ではエックスサーバーVPSの申し込み方法と始め方を書いていきます。 サーバーの作成までやるので、順番通りにやれば自分のサーバーが立っている状態になります。 記事の内容 エックスサーバーVPSの申し...

XserverVPSにSSH接続する

コンソールもXserverVPSの管理画面に用意されているけど、SSH接続してやった方がやりやすいのでSSH接続して進めます。

SSH接続の方法は以下で書いているので、よくわからなかったら参考にどうぞ。

エックスサーバーVPSにSSH接続する方法と設定を紹介します。

2022.11.27

エックスサーバーVPSにSSH接続したい・・・どうやるんだろう？ 今回はそんな悩みを解決するために、エックスサーバーVPSでSSH接続する方法を書いていきます。立てたサーバーにSSH接続したかったら参考にしていただけると幸いです。 記事の内容 エックスサーバーVPSでのSSH Keyの登録方法 プラ...

Nginxをインストールする

Nginxのインストールをします。

# パッケージの更新
$ apt update
$ apt upgrade

# Nginxのインストール
$ apt install nginx

Nginxをインストールしたらstatusを確認してみましょう。active (running)となっているなら起動しています。

もし起動していなかったら、起動しましょう。

$ systemctl start nginx

XserverVPSで80番ポートを許可してブラウザから確認する

ブラウザから画面を表示させて確認したいのですが、おそらくデフォルトで80番ポートは制限されていると思います。

これを許可してやりましょう。

Web(20/21/80/443)をONにするにして[接続許可ポートを設定する]をクリックしてやればOKです。

これでIPアドレスをブラウザに入力してアクセスしてみると初期画面が表示されましたね。

Nginxの設定等は後でやっていきます。

MySQLのインストールを行う

MySQLのインストールと起動を行います。

$ apt install mysql-server

インストールしたらstatusの確認もしておきましょう。active (running) なら起動しています。

起動していなったら起動しておくといいですよ。

$ service mysql start

データベースユーザーを作成する

Flaskアプリケーションで使うデータベースユーザーを作成します。ユーザーを作成したら権限も付与しておきます。

$ mysql -u root -p
// Enterでログイン
$ mysql> CREATE USER 'ユーザー名'@'localhost' IDENTIFIED BY 'パスワード';
$ mysql> GRANT ALL PRIVILEGES ON * . * TO 'ユーザー名'@'localhost';
$ mysql> FLUSH PRIVILEGES;

ここで作成したユーザーとパスワードをアプリケーション側で指定して使うことになるので、控えておくといいです。

アプリケーションのテーブルを作成する

migrationファイルなどを使わずに手動でデータベースを作成した場合は、SQLで必要なテーブルも作成しておきます。

$ mysql > create database flask_app_db;
$ mysql > use flask_app_db;
$ mysql >  create table todos(id int auto_increment, name varchar(255), index(id));

今回todosテーブルしか使わないので、そのテーブルを作成しておきました。

FlaskアプリケーションをXserverVPSにアップロードする

作成したFlaskアプリケーションをXserverVPSで申し込んだサーバーにアップロードします。

アップロードには以下のようなFTPソフトを使って行うといいです。

アプリケーションをサーバーのどのディレクトリにアップロードするかだけど、今回は/var/www/htmlにしたいと思います。（index.nginx-debian.htmlは最初から存在していたファイル）

アップロードした画像

アプリケーションのファイルとしてはindex.pyとindex.htmlしかないので、かなり簡素なものになっております。

Pythonをインストールする

$ apt install python3
$ apt install -y build-essential libssl-dev libffi-dev python3-dev python3-venv python3-pip

仮想環境を作成する

venvで仮想環境を作成して、その中でモジュール等をインストールして使っていくことにします。

$ cd /var/www/html/flask-app
$ python3 -m venv myvenv
$ source myvenv/bin/activate

// 仮想環境の解除は以下で行えます。
$ deactivate

必要なモジュールをインストールする

仮想環境が有効になったらアプリケーションに必要なものをインストールします。

$ vim requirements.txt
// 必要なモジュールを記述
flask
pymysql
uwsgi

// インストール
$ pip install -r requirements.txt

app.iniを作成する

uwsgiを使うので、そのファイルを作成しましょう。

$ vim /var/www/html/flask-app/app/app.ini

[uwsgi]
# アプリケーションのファイルがindex.pyなのでindexと指定
module = index
callable = app
master = true
processes = 1
socket = /tmp/uwsgi.sock
chmod-socket = 666
vacuum = true
die-on-term = true
# アプリケーションのディレクトリにload前に移動
chdir = /var/www/html/flask-app/app
logto = /var/www/html/flask-app/appuwsgi.log

Nginxの設定ファイルを作成する

Nginxの設定ファイルを作成します。uwsgiと繋げるだけの最低限としておきます。

$ vim /etc/nginx/conf.d/flask_app_nginx.conf

server {
        listen 80;
        server_name IPアドレス;
        location / {
          include uwsgi_params;
          uwsgi_pass unix:/tmp/uwsgi.sock;
        }
}

データベースの接続情報を変更する

アプリケーションからさっき作成したMySQLに接続できるように接続部分の情報を編集します。

return pymysql.connect(
  host="localhost",
  db=作成したデータベース名,
  user=作成したユーザー名,
  password=作成したユーザーのパスワード,
  charset='utf8',
  cursorclass=pymysql.cursors.DictCursor
)

自分のアプリケーションの接続部分の情報を変更しましょう。おそらく.envなんかで管理しているんじゃないかな。

起動した確認する

NginxとuWSIGを起動してきちんと動くかどうか確認します。

$ systemctl restart nginx
$ uwsgi --ini app.ini

ブラウザにIPアドレスを入力して確認してみるとちゃんと動きました。

まとめ

XserverVPSでローカルで作成したFlaskアプリケーションを動かすっていうことをやってみたけどできましたね。

かなりシンプルなアプリだけど、同じような流れでいろんな機能のあるアプリケーションでも公開できるはずです。

やったこととしては細かいところは多いけど、大まかに以下。

同じようにFlaskのアプリケーションを公開してみたかったらXserver VPS試してみるといいですよ。
最初は一番安い2GBプランから始めるのがおすすめです。