朝活126日目　昨日のサーフィンとHelloWorld

昨日は朝活サーフィンのために3時半に起きて準備。
土曜よりサイズ上がるけど、風と風波が強い予報だった。
念の為普段反応しないポイントも見て回ったけど、うねりは入ってるけど厳しそうで、いつもの恋が浦へー
風波の影響が強くて、入ってすぐは楽しめたけど、引いてきたら早い波で私の実力ではキャッチするのも難しく、２時間半でパドル筋も疲れて上がりました。

今日はものすごくぐっすり寝てしまったので、久しぶりに清々しい朝だ！
ただ仕事の始業もぼちぼちしなきゃなので朝活短めで。

昨日の経験としてあるポイントは風波：東北東１m、うねり：南１mではうねりは入ってるけど、割れてなかった。
同じく湾の方も風波：東０.８m、うねり：東０.８mでは反応しないことがわかった。

こういう記録をとっておけるアプリを最終的に作りたいなー

とりあえず、まずはHelloWorld

---

ChatGPT先生！！

まずはReactでhelloworldまで実装したいです。 Dockerを使いたいです。 使用するのはJavaScript、TypeScript、React.jsです

ChatGPT

ChatGPT

ReactアプリケーションをDockerコンテナ内で動かすための基本的な手順と、Dockerfileの作成方法をご案内します。ここでは、TypeScriptを使ったReactアプリケーションのセットアップを例に取りますが、JavaScriptを使用する場合も手順はほぼ同じです。

ステップ 1: Reactアプリケーションの作成

まず、TypeScriptを使ったReactアプリケーションを作成します。コマンドラインで次のコマンドを実行してください：

npx create-react-app my-surf-point --template typescript

このコマンドはhello-worldというディレクトリを作成し、TypeScriptを使ったReactアプリケーションの雛形をセットアップします。

ステップ 2: Dockerfileの作成

Reactアプリケーションのルートディレクトリ（この例ではmy-surf-point）内にDockerfileを作成します。ファイルには次の内容を記述します：

# ベースイメージとしてNode.jsを指定
FROM node:14

# アプリケーションの作業ディレクトリを設定
WORKDIR /app

# アプリケーションの依存ファイルをコンテナ内にコピー
COPY package.json yarn.lock ./

# 依存関係のインストール
RUN yarn install

# アプリケーションのソースコードをコンテナ内にコピー
COPY . ./

# アプリケーションのビルド
RUN yarn build

# 本番モードでReactアプリケーションを起動するためのサーバーをインストール
RUN yarn global add serve

# アプリケーションの起動
CMD ["serve", "-s", "build"]

ステップ 3: Dockerイメージのビルド

Dockerfileが完成したら、アプリケーションのディレクトリで次のコマンドを実行してDockerイメージをビルドします：

docker build -t my-surf-point .

ステップ 4: Dockerコンテナの起動

Dockerイメージのビルドが完了したら、次のコマンドでコンテナを起動します：

docker run -p 5000:5000 my-surf-point

これで、ブラウザを開きhttp://localhost:5000にアクセスすると、Reactアプリケーションが表示されます。

注意点

• この例ではserveを使用してビルドされたReactアプリケーションを配信していますが、実際の本番環境ではNginxやApacheなどのウェブサーバーを使用することが推奨されます。

• Node.jsのバージョンや、yarnの代わりにnpmを使用する場合は、適宜Dockerfileを調整してください。

---

実行しながらアプリ名考えてなかったことに気づいた。
my-surf-pointでいっか。

依存関係でNodeのバージョン怒られたので16に変更

コマンドも3000番に変更した。

立ち上げまで完了したので今日はここまでー
GitHubにあげなきゃなー