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

XserverVPSでFlaskアプリ公開したいけど、どうやるんだろう?

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

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

記事の内容
  • XserverVPSでサーバーを立てる
  • 立てたサーバーにFlaskの環境を構築する
  • ローカルのFlaskアプリをサーバーにアップロードして公開する

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

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

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

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

    構築する環境

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

    環境
    • Ubuntu
    • Nginx
    • MySQL
    • uWSGI

    XserverVPSでこれらをインストールして使うっていうこと?
    そうだね、上記のもので環境作ってアプリケーションを動かすよ。

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

    XserverVPSでサーバーを立てる

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

    • プラン・・・迷ったら一番安い2GBがおすすめ
    • サーバーの契約期間・・・12ヶ月がおすすめ
    • イメージタイプ・・・今回はUbuntuでやります
    • rootパスワード・・・rootユーザーのパスワード
    • SSH Key・・・SSH Keyは作成しておくのがおすすめ

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

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

    XserverVPSにSSH接続する

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

    $ ssh -i 秘密鍵 root@IPアドレス

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

    Nginxをインストールする

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

    # パッケージの更新
    $ apt update
    $ apt upgrade
    
    # Nginxのインストール
    $ apt install nginx
    

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

    $ systemctl status nginx
    ● nginx.service - A high performance web server and a reverse proxy server
    Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset:>
    Active: active (running) since Wed 2023-01-18 11:51:49 JST; 8s ago

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

    $ 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 status
    ● mysql.service - MySQL Community Server
    Loaded: loaded (/lib/systemd/system/mysql.service; enabled; vendor preset: enabled)
    Active: active (running) since Wed 2023-01-18 12:05:10 JST; 8s ago

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

    $ 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ソフトを使って行うといいです。

    FTPソフト例
    • FFFTP
    • Cyberduck
    • Filezilla

    アプリケーションをサーバーのどのディレクトリにアップロードするかだけど、今回は/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アプリケーションを動かすっていうことをやってみたけどできましたね。

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

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

      やったこと
      • XserverVPSでサーバーを立てる
      • 立てたサーバーにFlaskの環境を構築する
      • ローカルのFlaskアプリをサーバーにアップロードして公開する

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