APIサーバを開発する前に、私は突然このような考えを持っていました.
とにかくデータを入れなきゃ...直接コードでデータを生成して入れますか?
PUT APIを定義して作成して呼び出せばいいのではないでしょうか.
PUT APIを呼ぶのはpostmanだと思っていますか?
いっそデータの追加と削除ができるヒントページを作ったほうがいいのではないでしょうか.
じゃ、そうしましょう.まずFEサーバーを作成します!!
意識の流れに身を任せることにした.FEサーバを作成します.
作成

GitHub repo(svelte+esbuild)

Oracleインスタンス

の作成

GitHub Actions連動

インストール

nginx

svelteやesbuildについては何も知らないが、まず試してみることにした.
つまり単一のPageアプリケーション形式の静的front-endを作成する
この言葉は.buildが生成した結果を返します(html+js+css+...)Webサーバの場所にコピー...
導入プロセスは、次のようになります.

GitHub repoプッシュ

起動

GitHub動作

yarn install

yarn build

バージョンの結果をnginx Webサーバロケーション

にコピー

svelte + esbuild FE init

まずhttps://github.com/Tazeg/svelte-esbuild-templateを参照し、esbuildを用いて構築可能な形でプッシュした.(https://github.com/crazydj2/blog-frontend参照)

package.json

「svelte」、「esbuild」および「esbuild-svelte」モジュール

を使用

バージョンのスクリプト

の作成

{
  "name": "blog-frontend",
  "version": "1.0.0",
  "repository": "[email protected]:crazydj2/blog-frontend.git",
  "license": "MIT",
  "dependencies": {
    "esbuild": "^0.14.28",
    "esbuild-svelte": "^0.6.3",
    "svelte": "^3.46.4"
  },
  "scripts": {
    "build": "node esbuild.js"
  },
  "type": "module"
}

esbuild.js

バージョンオプション

の設定

import esbuild from 'esbuild';
import sveltePlugin from 'esbuild-svelte';

// esbuild build options
esbuild.build({
  entryPoints: ['./src/main.js'],
  bundle: true,
  minify: true,
  sourcemap: false,
  outfile: './public/build/bundle.js', // and bundle.css
  plugins: [
    sveltePlugin()
  ]
}).catch(e => {
  console.error(e);
});

src/...

開発ファイル(.svelte、.jsなど)は

にあります.

ファイルは、構築された最終成果物(html、js、css、...など)

です.

public/...

最終製品の位置

は現在indexにすぎません.htmlを埋め込んで、後でhtmlプラグインを使って構築しましょう、

public/index.htmlをそのまま実行すると、次のような画面が表示されます...成功...

GitHub Actionsの起動

GitHub Actions連動は前に書いた文章に従って行われたので成功しました...
https://velog.io/@agroydj/ブログ-作成-大作戦-GitHub-Actions-使用-導入-環境-構築
ただし、ymlファイルの内容をいくつか変更して、フロントエンドの構築と導入タスクを実行します.これで、pushだけでデプロイが実行されます.

name: frontend-deploy
on: 
  push:
    branches: [ master ]
jobs:
  frontend-deploy:
    runs-on: self-hosted
    steps:
      - uses: actions/checkout@v2

      - name: yarn install
        run: yarn install

      - name: yarn build
        run: yarn build

      - name: remove
        run: rm -rf ./*
        working-directory: /usr/share/nginx/blog-front/

      - name: cp
        run: cp -r ./public/* /usr/share/nginx/blog-front/

nginxインストール

https://hgko1207.github.io/2020/11/16/linux-9/を参照してインストールしてください.
参考までに、ブログでは8080ポートが使用されるため、基本80ポートだけでなく8080ポートも開いています.

# nginx 설치
$ sudo yum install -y nginx

# 포트 추가
$ sudo firewall-cmd --permanent --zone=public --add-port=80/tcp
$ sudo firewall-cmd --permanent --zone=public --add-port=8080/tcp

# 방화벽 재시작
$ sudo firewall-cmd --reload

# 개방된 포트 목록 확인
$ sudo firewall-cmd --list-ports

# 서비스 등록 & 시작
$ sudo systemctl enable nginx
$ sudo systemctl start nginx

# nginx 재시작
$ sudo systemctl restart nginx

nginxインストール後のメインプロファイルnginx.confファイルでは、/usr/share/nginx/htmlに80ポートが設定されているデフォルトのWebサーバが表示されます.
ブログにWebサーバの設定を追加します.

......

http {
    ......

    # 기본적으로 설치되어 있는 서버
    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
    
    # 블로그를 위한 웹서버 추가
    server {
        listen       8080 default_server;
        listen       [::]:8080 default_server;
        server_name  _;
        root         /usr/share/nginx/blog-front;

        location / {
        	try_files $uri $uri/ /index.html;
        }
    }
    
    ......
}

結果はね.こつこつ~

テストとしてfrontソースを修正するとpush時にすぐに反映されます.
次に、データの追加と削除のヒントページを簡単に作成します.