gosho-techplayのblog

自作サイトを制作した際の実装方法などを備忘録としてまとめています。

WindowsでWSL2のプロセス「Vmmem」のメモリ使用量を制限する

編集中

Dockerの開発環境で動作が重くなっていたので対策の備忘
Docker Desktopで使ってるWSL2のプロセス「Vmmem」のメモリ使用量を制限する
制限前は約4.5GBメモリを使用していた。

実施手順
隠しファイル(.wslconfig)を右記ディレクトリに配置「C:\Users\username.wslconfig」

[wsl2]
memory=1GB

cmdを起動しWSL2を再起動

> wsl --shutdown

すると、WSL2を再起動する旨のポップが表示されるので「Restart」ボタンをクリックします。

mysql操作コマンド・型関係（個人備忘）

MySQLにログインする
mysql -u ユーザー名 -p

空文字が登録されているカラムをint型などに変換するとエラー
error 1366: incorrect integer value: '' for column 'rest_1' at row 1
null状態であればOK。
ただし、nullで対応する場合はカラムに持たせる値がNULLとして問題ない場合のみ。
nullで持たせることによって起きるいろんな問題（isNullでインデックスが効かない、計算時のnull伝搬などなど）があるので
0で登録させといてアプリ側で０の場合の対応をするほうが好ましい。

reactとexpressでwebサイト作成（構築手順まとめ）

編集中のため体裁は適当です。

前提　nodejsはインストール済　バージョンは特にしていない（古すぎなければOK）

ディレクトリ構成
app
　　-frontend
　　-backend

バックエンド側構築手順
バックエンド側のディレクトリに移動する
npm init -y
「backend」の中に「package.json」が作られます。

次にTypeScriptを使う準備をします。
2つのパッケージをインストールします。
npm install -D typescript @types/node

次に、以下のコマンドを実行します。
npx tsc --init

すると、「backend」の中に「tsconfig.json」が作られます。
「tsconfig.json」はTypeScriptに関する設定を書くところです。
デフォルトのままほとんど変えていません。
変えたのは「"target": "esnext"」の部分だけです。
今回は必要最低限の箇所のみ変更する
{ "compilerOptions": { "target": "esnext", "module": "commonjs", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true } }

npm install express
今回はTypeScriptを使うため、以下も実行します。
npm install -D @types/express
そして、「backend」の中に「server.ts」というファイルを作ります。
package.json内の「"main": "server.ts"」という記述に変更しておく。（検索対応だった？）

「ts-node」は、TypeScriptでNode.jsを動かすための実行エンジンです。
というわけで、ts-nodeをインストールしましょう。
npm install ts-node
package.json内の「"type": "module"」と書いていた部分を「"type": "commonjs"」に書き換えてください。

デーモン化しておく（いちいちサーバーを終了させて、また起動して...ってのが面倒）
「nodemon」を使えば、先ほどの「サーバーを終了させて、また起動して...」の作業が不要です。
さっそくインストールします。
npm install nodemon

サーバーを起動するときに、いちいち「npx nodemon server.ts」って入力するの面倒ですよね。
そこで、「package.json」に記述を加えます。
"scripts": { "start": "nodemon server.ts", },

フロントエンド側構築手順
フロントエンド側のディレクトリに移動する
移動したら、以下のコマンドを実行します。
npx create-react-app . --template typescript

では、Reactの開発サーバーを起動してみましょう。
フロントエンド用のターミナルで以下のコマンドを実行します。
npm start

Expressサーバーにアクセスする
では、Expressで作ったバックエンドのデータをReactで表示していきます。
Reactで外部からデータを取得するので、「fetch関数」を使っています。
さらに、データ取得のときは「useState」と「useEffect」を使います。
この時点でexpressサーバにAPI通信をした場合、すると、下記のようなエラー表示が出ているかと思います。
意味
「CORSポリシーにより、"http://localhost:8000/api"にアクセスことはできません」
フロント側のオリジンは"http://localhost:3000”、オリジン側のドメインは"http://localhost:8000”でありクロスオリジンであることからこのままではフロント側から"http://localhost:8000”にアクセスすることができません。

proxyを設定する
そこで、React側の「package.json」に記述を加えましょう。
"proxy": "http://localhost:8000",
これでフロント側から"http://localhost:8000”にアクセスすることができるようになります。

【Github Action】Githubのmainブランチpush時にサーバ上の環境に自動デプロイする

編集中

目次

  1. 概要
  2. 手順
  3. 気づきなど

概要

1.自動でデプロイしたいサーバーに GitHub のリポジトリを clone する。
2.GitHub のリポジトリで GitHub Actions の設定を行う。
3.GitHub リポジトリの指定したブランチ(今回はmainブランチ)に merge されたら、デプロイしたいサーバー側で自動的に指定ブランチが pull される。

手順

前提 サーバ上に対象リポジトリをcloneしている事。 確認上、ssh.httpsどちらでもOKのはず。再確認したい。
1.ローカルで公開鍵・秘密鍵を作成する 2.公開鍵をリポジトリのDeploy Keysに登録する settingsから設定できる 3.サーバに秘密鍵を登録する　windowsならscpコマンドで　登録先は~/.ssh/任意のファイル名 4.Github Actionsのワークフロー作成 5.ワークフロー内で記述したシークレット情報をリポジトリに登録する　SERVER_USERNAME、SERVER_HOST、SERVER_DEPLOY_DIRなど 6.ローカルで指定ブランチを更新し、サーバ上に自動デプロイされている事を確認する ここはトリガーによって異なる（指定ブランチへのpushなど）

  1. 詳細
    1. 「おはようございます」とは
      起床時、あるいは朝人に会った時の挨拶。
    2. 「こんにちは」とは
      語源は「今日は、ご機嫌いかがですか？」が省略されたもの
    3. 「こんばんは」とは
      語源は「今晩は〇〇ですね。」の後半部分が省略されたもの

基本的なmarkdownの記述まとめ

markdown

見出し

記入例

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

表示内容

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

見出しレベル1と2は以下の記法も使うことができます。

見出しレベル 1
==============

見出しレベル 2
--------------

見出しレベル 1

見出しレベル 2

箇条書きリスト

行頭にハイフン - を付けると箇条書きリストになります。- の代わりに + や * を使うこともできます。
記入例

- 箇条書きリスト1
- 箇条書きリスト2
- 箇条書きリスト3
* 大分類1
    + 中分類A
        - 小分類w
        - 小分類x
    + 中分類B
        - 小分類y
* 大分類2
    + 中分類C
        - 小分類z

表示内容

  • 箇条書きリスト1
  • 箇条書きリスト2

  • 箇条書きリスト3

  • 大分類1

    • 中分類A
      • 小分類w
      • 小分類x
    • 中分類B
      • 小分類y
  • 大分類2
    • 中分類C
      • 小分類z

番号リスト

行頭に数字と . を付けると番号付きリストになります。先頭行の番号は指定した数値になります。2 行目以降の番号は指定した数値ではなく自動的に連番となります。（たとえば、 先頭行を 4. とした場合、 番号は必ず 4, 5, 6, …と振られていきます。）
記入例

1. 番号付きリスト1
2. 番号付きリスト2
3. 番号付きリスト3

表示内容

  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3

引用

記入例

> お世話になります。xxxです。
> 
> ご連絡いただいた、バグの件ですが、仕様です。

表示内容

お世話になります。xxxです。

ご連絡いただいた、バグの件ですが、仕様です。

二重引用

記入例

> お世話になります。xxxです。
> 
> ご連絡いただいた、バグの件ですが、仕様です。
>> お世話になります。 yyyです。
>> 
>> あの新機能バグってるっすね

表示内容

お世話になります。xxxです。

ご連絡いただいた、バグの件ですが、仕様です。

お世話になります。 yyyです。

あの新機能バグってるっすね

整形済みテキスト（pre）

記入例

<pre>
preタグで囲んだ本箇所は
このように改行も
そのまま書けます。
</pre>

表示内容

preタグで囲んだ本箇所は
このように改行も
そのまま書けます。

半角スペース4個もしくはタブで、コードブロックをpre表示する事もできます。
記入例

    # Tab
    class Hoge
        def hoge
            print 'hoge'
        end
    end

---

    # Space
    class Hoge
      def hoge
        print 'hoge'
      end
    end

表示内容

# Tab
class Hoge
    def hoge
        print 'hoge'
    end
end

# Space
class Hoge
  def hoge
    print 'hoge'
  end
end

インラインコード

記入例

インストールコマンドは `gem install hoge` です

表示内容
インストールコマンドは gem install hoge です

テキスト装飾

アスタリスクもしくはアンダースコアで文字列を囲むことで表現できます。
記入例

これは*イタリック*です  
これは**ボールド**です  
これは***イタリック＆ボールド***です  
これは~~打消し線~~です  
これは<sup>上付き</sup>です  
これは<sub>下付き</sub>です

表示内容 これはイタリックです
これはボールドです
これはイタリック＆ボールドです
これは打消し線です
これは上付きです
これは下付きです

水平線

アンダースコア、アスタリスク、ハイフンなどを3つ以上連続して記述することで水平線を表示できます。 ※連続するハイフンなどの間にはスペースがあっても良いです。
記入例

***
___
---
*    *    *

表示内容

リンク表示

[表示文字](リンクURL)形式でリンクを記述できます。
記入例

[Google先生](https://www.google.co.jp/)

表示内容
Google先生

定義参照リンク

記入例

[こっちからgoogle][google]
その他の文章
[こっちからもgoogle][google]

[google]: https://www.google.co.jp/

表示内容
こっちからgoogle
その他の文章
こっちからもgoogle

リンクテキスト簡易記法

URLは記述するだけで自動的にリンクになります。
記入例

[https://www.google.co.jp/]

表示内容

https://www.google.co.jp/

テーブル表示

記入例

|header1|header2|header3|
|:--|--:|:--:|
|align left|align right|align center|
|a|b|c|

表示内容
|header1|header2|header3| |:--|--:|:--:| |align left|align right|align center| |a|b|c|

注釈

記入例

注釈のようなことを実現可能です<sup>[1](#note1)</sup>

<small id="note1">無理やりですが</small>

表示内容 注釈のようなことを実現可能です1

無理やりですが