RockyLinuxFlaskとVue.js を動かす

アップデート

sudo dnf -y update

ネットワーク設定 自動接続有効化

1. ens0s3 (DHCP)

nmcli c up enp0s3
nmcli c mod enp0s3 connection.autoconnect yes

SELinuxを無効

確認コマンド

getenforce

状態の内容

enforcing 有効化状態
permissive ログだけ記録状態
disabled 無効化状態

詳細を確認する

sestatus

SELinux 一時的に無効化

sudo setenforce 0

SELinux 永続的に無効化

永続的に無効化するには「/etc/selinux/config」を変更します。

バックアップを作成。

sudo cp -piv /etc/selinux/config /etc/selinux/config.`date "+%Y%m%d"`

/etc/selinux/configを編集

sudo vi /etc/selinux/config

「enforcing」をコメントアウトして「disabled」を追加

#SELINUX=enforcing
SELINUX=disabled

ツールをインストール。

sudo dnf groupinstall "Development Tools" -y
sudo dnf install openssl-devel libffi-devel bzip2-devel -y

※wgetコマンドがなければインストールしておきます。

sudo dnf install wget -y

Python 3.10.7ダウンロード

wget https://www.python.org/ftp/python/3.10.7/Python-3.10.7.tar.xz
tar -xf Python-3.10.7.tar.xz
cd Python-3.10.7 && ./configure --enable-optimizations
make
sudo make install
sudo make altinstall

update-alternativesを使ったバージョン変更

update-alternatives

pip3 をアップデート

pip3 install --upgrade pip

OS再起動

※再起動しないと反映されない

reboot

確認コマンド

python3 -V
pip3 --version

Flaskインストール

dnf install python3-flask

Pythonのモジュールインストール

pip3 install -U flask-cors
pip uninstall mecab-python3
pip install mecab-python3

mod_wsgiの導入

pip install mod_wsgi
pip install mod-wsgi-httpd

Apache（httpd）のインストール

dnf install -y httpd httpd-tools httpd-devel httpd-manual

インストールの確認

以下のコマンドでインストールされていることを確認。

dnf list --installed | grep httpd

Apache起動

systemctl start httpd

Apache状態確認

systemctl status httpd.service

自動起動を有効

systemctl enable uwsgi

Apache再起動

systemctl restart httpd.service

Apache状態確認

systemctl status httpd.service

ディレク構成

var/www/flask/
 └─backend/
 |　  ├─ flask.wsgi
 |　  ├─ server.py
 | 　 └─ utils.py
 └─frontend/app/
    ├── README.md 
    ├── build             // ビルド用スクリプトを格納
    ├── config            // ビルド用設定ファイルを格納
    ├── index.html        // インデックス、最終的にこのファイルに描画される
    ├── node_modules      // パッケージを格納
    ├── package-lock.json // パッケージのバージョン情報
    ├── package.json      // スクリプトやインストールされたパッケージの情報
    ├── src               // ビルド対象のファイルを格納
    ├── public            // ビルド対象のファイルを格納
    └── static            // 静的ファイルを格納

ディレク作成後移動

mkdir /var/www/flask/ && cd $_

#　設定ファイルの作成
設定ファイルにVirtualHostを追加する。
/etc/httpd/conf/httpd.conf に追記するか、
/etc/httpd/conf.d/にwsgi.confファイルを作成して下記のように記述。

vim /etc/httpd/conf.d/wsgi.conf

# wsgi.conf
<VirtualHost *:80>
    serverName localhost
    
    WSGIDaemonProcess myapp user=apache  group=apache threads=5
    WSGIScriptAlias / /var/www/flask/backend/flask.wsgi
    
    <Directory /var/www/flask/backend/>
        WSGIProcessGroup myapp
        WSGIApplicationGroup %{GLOBAL}
        WSGIScriptReloading On
        Require all granted
    </Directory>
</VirtualHost>

以下の個所は作成フォルダーを記載する

 <Directory /var/www/任意の場所>

.wsgiファイルを作成

/var/www/Flask/backend/にflask.wsgiファイルを作成

mkdir /var/www/flask/backend/ && cd $_

# coding: utf-8
import sys

sys.path.insert(0, '/var/www/Flask/backend/')

from myapp import app as application

Hello, World!を表示

myapp.pyを/var/www/Flask/backend/に作成

server.py

from flask import Flask
from flask import request, make_response, jsonify
from flask_cors import CORS
from utils import wakati
from flask import Flask, render_template


app = Flask(__name__, static_folder='../frontend/dist/static', template_folder='../frontend/dist')

@app.route('/',defaults={'path':''})
@app.route('/<path:path>')
def index(path):
    return render_template('index.html')


if __name__ == "__main__":
    app.debug = True
#    app.run(host='127.0.0.1', port=5000)

#フロント側

	
Node.js 16 をインストールします。
現在、有効になっている Node.js のバージョンを確認してインストールします。
dnf module list nodejs


# 他バージョンが有効な場合は一旦リセットして有効バージョンを切り替え
dnf module reset nodejs
dnf module enable nodejs:16

Node.js 16 を指定してインストール

dnf module -y install nodejs:16

バージョン確認

 node -v

以下が表示されればOK
v16.17.0

yarnインストール

npm install -g yarn

Create React App はReactの環境構築ツールで一度インストールしてしまえばコマンド一つでReactに必要な環境を構築することができます。

Create React Appのインストールはnode.jsがインストールされている環境で以下のコマンドを入力することでインストールできます。

npm install -g create-react-app

エラーが出たら以下コマンドを入力
npm i tar      

必要なライブラリをインストール

FastAPIを使う上で必要なライブラリは2つあります。

fastapi
uvicorn
の2つです。fastapiはFastAPI本体で、uvicornはローカルで動くサーバーです。この2つのライブラリがないと動作しないので、忘れずにinstallしましょう。

$ pip install fastapi uvicorn

Reactプロジェクト作成

インストールが完了したらプロジェクトを作成したいフォルダ上で以下のコマンドで
Reactプロジェクトを作成します。

create-react-app プロジェクト名

今回の場合は以下
create-react-app frontend

「Happy hacking!」と表示されたら「Create React App」のインストールは成功です。

Create React Appの利用方法

以下のコマンドでプロジェクトフォルダに移動して、
cd frontend
以下のコマンドでCreate React Appを起動します。

npm start
Yarnをインストールしている環境では以下のコマンドでも実行できます。

yarn start
少しまつと http://localhost:3000 のURLでブラウザが立ち上がり Create React App の初期画面が表示されます。

Create React Appはローカルで開発できるようローカルサーバーも含めて用意されており、上記のコマンドで開発環境が立ち上がります。

試しに少し編集してみましょう。先ほど確認した src/App.js のh1要素を以下のように変更してファイルを保存します。

Create React Appで本番公開

作成したアプリケーションを本番公開するには npm run build とコマンドを入力します。

自動生成された雛形の中のApp.jsを書き換え

App.js
import React from 'react';
import './App.css';
import Axios from 'axios';

//function App() {
export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>text parser</h1>
          <form onSubmit={this.handleSubmit}>
            <label>
              <textarea name="text" cols="80" rows="4" value={this.state.value} onChange={this.handleChange} />
            </label>
            <br/>
            <input type="submit" value="Parse" />
          </form>
        </header>
      </div>
    );
  }


  wakati = text => {
    //console.log("input text >>"+text)
    Axios.post('http://127.0.0.1:5000/wakati', {
      post_text: text
    }).then(function(res) {
      alert(res.data.result);
    })
  };

  handleSubmit = event => {
    this.wakati(this.state.value)
    event.preventDefault();
  };

  handleChange = event => {
    this.setState({ value: event.target.value });
  };
}

export default App;

npm run build

以下のエラーが出力された
Module not found: Can't resolve 'axios' in ' 〜

以下のコマンドを入力
npm install axios

rm -rf node_modules package-lock.json && npm install

この中の以下の部分でサーバー側とのやり取りを行なっています。

  wakati = text => {
    //console.log("input text >>"+text)
    Axios.post('http://127.0.0.1:5000/wakati', {
      post_text: text
    }).then(function(res) {
      alert(res.data.result);
    })
  };

server.pyで立てたhttp://127.0.0.1:5000/wakatiにthis.state.valueの値をポストします。
サーバー側で処理された後、返ってきたresultの値がalert(res.data.result);によってブラウザに表示されます。

動かす

フロントエンド/バックエンド用にそれぞれターミナルを立ち上げて以下のコマンドを実行します。

サーバー側

cd backend
python server.py

フロント側

cd frontend/app
yarn start

ビルド

 npm run build

git hubでフォルダートラッキングの対象を記載

.gitignore

エラーログ場所

Apache
/var/log/httpd

Vue.js
/root/.npm/_logs/

gitのlog確認

git log --oneline

git　履歴を戻す

git reset --hard 番号

npm install @vue/compiler-sfc
npm install vue@next

PostgreSQL14をインストール

sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-8-x86_64/pgdg-redhat-repo-latest.noarch.rpm
関係データ削除

CentOS標準で使えてPostgreSQLの無効化。

 sudo dnf -qy module disable postgresql

エラーが出たら以下を実行

■　対策
・バックアップ

sed -iBAK '/^failovermethod=/d' /etc/yum.repos.d/*.repo

・文字の置き換え

sed '/^failovermethod=/d' /etc/yum.repos.d/*.repo

PostgreSQLサーバーのインストール。

sudo dnf install -y postgresql14-server

バージョン確認

 psql --version

初期化

sudo PGSETUP_INITDB_OPTIONS='--encoding=UTF-8 --no-locale' /usr/pgsql-14/bin/postgresql-14-setup initdb

以下のエラーが出力されたら、データを消してやり直す

Data directory is not empty!

関係データ削除

rm -fr /var/lib/pgsql/14/data/* 

カラム作成

/usr/pgsql-14/bin/postgresql-14-setup initdb

systemdのサービスとして有効化して

systemctl enable postgresql-14

ステータス確認

systemctl status postgresql-14

各種ファイルなど/var/lib/pgsql/14ディレクトリにあります。

sudo ls -l /var/lib/pgsql/14

参考サイト