無駄な作業なしで簡単に従うWindows開発環境セットアップ
kenuheo
2時間以内に git、VS Code、Node.js、Python、Java 開発環境を Windowsで スムーズに設定する方法です。
입문
Git, VSCode, Microsoft Windows
SPAの代名詞であるReact開発環境を構築し、Node.js基盤のAPI ServerとSwaggerを通じたAPI文書を自動生成します。ローカル開発環境と開発サーバーの違いを理解し、AWSを簡単に従って利用できます。 講義資料: https://bit.ly/okreactapi

React開発環境とサーバー構成
Viteベースの React 開発環境を作る
Node.jsベースのAPIサーバー
SwaggerによるAPI文書の自動化
ローカル開発環境と開発サーバーの違い
CORS問題の解決
AWS EC2サーバー構築基本
Nginx(Webサーバー) 基本的な使用方法
NginxとNode.jsの連携
無料HTTPS証明書発行
GitHub Actionsを利用したCI/CD自動化
SPAプロジェクトのローカル開発環境構築から
サーバーデプロイ自動化まで直接チャレンジしてみてください!✌
📢 受講前にご確認ください!
フロントエンド環境とAPIサーバーを開発したものの、いざどのようにデプロイすべきか途方に暮れていませんか?馴染みのない開発環境のセットアップとデプロイCI/CDのフローを身につけたいと思いませんか?
この講義では、Reactプロジェクトのローカル開発環境構築およびサーバーデプロイ自動化プロセスを直接体験してみます。既存のWeb開発方式とは異なるReactを利用したシングルページアプリケーション(SPA)開発環境を扱い、これをサーバーにデプロイしてサービスする方法について紹介します。また、Swaggerを利用したAPI文書自動化も併せて扱い、ローカル開発環境とデプロイされるサーバー環境との違いを学ぶことができます。
Windowsを基準に動画を作成しましたが、MacやLinuxでもほぼ同じように進めることができます。開発環境のセットアップから配信、自動化がどのように行われるのか、講義で直接確認してみてください!
VSCode
Node.js
Git
GitHub
GitHub Actions
AWS EC2
AWS Route53
Nginx + HTTPS
(SSL証明書)
01. 準備する
必須の開発プラットフォームと開発ツール、関連するアカウント登録の紹介
02. SPA開発環境構築
ローカルコンピュータで作業するためのフロントエンドとバックエンドの基本的なプロジェクト環境構成
03. デプロイプロセス
サービスのためにサーバーにデプロイする手順、方法の紹介
04. ドメイン登録とHTTPS設定
ドメインとサーバーを接続し、HTTPS接続のための方法紹介
05. デプロイの自動化
コードが変更されると自動的に開発サーバーにデプロイされる作業の説明
06. CORS設定
ローカル開発環境で発生するCORS問題とビルド環境変数の構成
時々YouTubeでプログラミング配信をしています。
Hello Worldを出力すれば開発準備は完了です!単純にコードを書いた経験があるというレベルで終わるのではなく、自分が作ったアプリケーションを人々が使えるようにサーバーに自分が作ったコードをアップロードしてサービスできる自信が生まれます。
Q. 非専攻者でも受講できる講義ですか?
はい、非専攻者でも十分に受講できます。関連プログラムのインストールから丁寧に説明いたします!
(前提知識としてJavaScriptを知っている必要があります!)
Q. 授業内容はどのレベルまで扱いますか?
ReactとNode.jsの文法は扱わず、開発環境構築と配備及び自動化について説明します。
Q. 講義で使用される技術のバージョンが上がった場合、講義のアップデートは行われますか?
講義の進行が困難になるほどメジャーバージョンが上がった場合、講義内容のアップデートは必要です。したがって2025年まではアップデートを念頭に置いています。
学習対象は
誰でしょう?
スタートアップの開発者として入社したのに先輩がいない方
SPA開発環境とサーバーデプロイが初めての方
AWSの利用が初めての方
HTTPSサーバー構成を学びたい方
CI/CD初心者
前提知識、
必要でしょうか?
JavaScript
767
受講生
52
受講レビュー
43
回答
4.6
講座評価
3
講座
https://okky.kr 창립자이며, https://github.com/kenu/okdevtv 에서 배운 것을 공유하고 있습니다.
https://mp4.okdevtv.com 에 개발관련 채널의 최신 영상을 모으고 있습니다.
KenuHeo 유튜브에서 프로그래밍 방송을 500회 이상 진행하고 있습니다.
全体
8件 ∙ (1時間 48分)
講座資料(こうぎしりょう):
1. 00.講義紹介
02:17
2. 01. 準備する
10:46
3. 02. SPA開発環境の構成(1)
15:42
4. 02. SPA開発環境の構成(2)
08:32
5. 03. デプロイプロセス
23:09
全体
46件
4.6
46件の受講レビュー
受講レビュー 4
∙
平均評価 5.0
5
プログラミングに入って、ちょうどローカルで開発してプロジェクトを簡単に作ることができるようになりましたが、このような開発環境の設定と配布CI/CDについては不慣れで理解しにくく接するのが難しかったです。 特に、サーバーで何をするのか理解が難しかったのですが、インストールするページ案内から環境設定まで説明してくれ、全体的な生成 - 設定 - 簡単なエラー解決 - 展開まで取り上げて、1サイクルを回すことができるようになりました。 学ぶときに一番難しいのが経験してみなかったことをそうしてやむを得ず抽象的な理解に移らなければならない部分なのにこうやったサイクルを回して再び講義資料を見たら経験に基づいて 'あ、さっきしたそれだ!' ;しながら得ていく方が多くなるようです。 開発環境の設定から配布まで使用されるプロジェクト(React..など)や詳細な説明を得るための方ではなく、'一体プロジェクトをどのように作って設定して配布し、それを自動化しないのか?できなかった方が聞くととてもいいようです。 まだ現業で仕事をしてみた経験がなくて講義で習得した知識をどれだけ活用できるかは分からないが、後でプロジェクトや現業で仕事をするときに講義を通じて得た経験を思い出して学習の基盤を設けることができることを確信し、この講義が私のような初心者にたくさん知られてほしいですね! 良い講義ありがとうございます。
受講後ありがとうございます。助けてくれて嬉しいです。 開発+配布環境を構築することは基本です。ここに必要なサービスを作成するには、より多くの努力が必要です。 良いサービスをしてください。 応援します!
受講レビュー 4
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
5
for 支払い 悩む受講生 - 毎回ローカルでのみ動作し、CI/CDを考慮した序盤の開発環境の構築はしなかったが、本講義を通じて簡単ですが、全体のプロセスがどのように進行されるべきかを知ることができてよかったです。 - だから、環境設定のために作成したコードやインストールしたパッケージ/フレームワークの説明は省略されていることに留意しておきたいと思います。 - おそらくWeb開発自体も初めてなのに '最近CI/CDは必須だからただ受講しなければならない'という考えで講義を聞いた初級者の方も多いでしょう。あなたのプロジェクトに合わせてCI / CDをカスタマイズする必要があるかもしれません。添付されたコードの意味を参考に調べてみると、CI/CDをきちんと理解することになるのではないでしょうか。 結論 - CI/CD 大枠をつかむ目的で聴く開発者の方がおすすめ - 深くカスタマイズする必要があるときは、本講義コードを分析していき、必要な部分を追加学習すれば、実力向上に役立つことが多いと期待 - 良い講義を開いてくれてありがとう!
受講評 ありがとうございます。 幸せなプログラマーになってください。
受講レビュー 4
∙
平均評価 4.5
5
良い講義ありがとうございます! 配布自動化の内容だけでなく、基礎的なツールの使い方まで詳細に知ることができ、多くのお役に立ちました。 ずっとPHPだけやってきてフロントバックの分離がきちんとできなかったのに良い講義を見て初めて分離してみて直接配布までしてみました。 また、githubの使用まで学ぶ機会があり、多くの助けになりました。 ありがとうございます。
良いレビューありがとうございます。 SPAは扱うようにフロントエンドがもう一つあって、その部分に集中しました。 幸せなプログラマーになってください。
¥5,473
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!