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
```








# 参考サイト


https://www.ravness.com/posts/apacheflask

https://shigeblog221.com/flask-vuejs-mustache/

https://tech-market.org/vue-flask-cooperation/


https://qiita.com/moyegogo1020/items/7cf9daaacc6bac1b3c33


https://www.sejuku.net/blog/27637


https://bitwalk.blogspot.com/2019/12/centos-8-django-apache-httpd.html


https://linux-svr.com/Python/61.php

https://qiita.com/yukibe/items/7520ec4d6f7e5086dd69

https://qiita.com/tsubo/items/579daa4f1b45f13b8175

https://qiita.com/4npei/items/364c1f66cdbf5f187c61

https://qiita.com/y-tsutsu/items/67f71fc8430a199a3efd#vuejs%E3%81%A8%E3%81%AF

https://qiita.com/567000/items/dde495d6a8ad1c25fa43

https://www.miracleave.co.jp/contents/1715/post-1715/

https://kazunaka.com/python-flask-vue-excel/

https://jps-code.com/flask_web_application

https://qiita.com/charon/items/a5e8eef212781ff5e335

https://wsdlab.com/?p=800

https://qiita.com/Pu-of-Parari/items/f3733f0ba48e1df50667#%E5%AE%9F%E8%A3%85%E7%92%B0%E5%A2%83

https://qiita.com/yukibe/items/7520ec4d6f7e5086dd69

https://ja.planetalpha31.com/build-simple-crud-app-with-python

https://zenn.dev/sawao/articles/15a9cf0e3360a7


https://kazunaka.com/flask-react-helloworld-2/#outline__1