강의

멘토링

커뮤니티

BEST
Programming

/

Devops & Infra

React + API Server プロジェクト開発とデプロイ (CI/CD)

SPAの代名詞であるReact開発環境を構築し、Node.js基盤のAPI ServerとSwaggerを通じたAPI文書を自動生成します。ローカル開発環境と開発サーバーの違いを理解し、AWSを簡単に従って利用できます。 講義資料: https://bit.ly/okreactapi

  • kenuheo
3시간 만에 완강할 수 있는 강의 ⏰
CI/CD
SPA

学習した受講者のレビュー

受講後に得られること

  • React開発環境とサーバー構成

  • Viteベースの React 開発環境を作る

  • Node.jsベースのAPIサーバー

  • SwaggerによるAPI文書の自動化

  • ローカル開発環境と開発サーバーの違い

  • CORS問題の解決

  • AWS EC2サーバー構築基本

  • Nginx(Webサーバー) 基本的な使用方法

  • NginxとNode.jsの連携

  • 無料HTTPS証明書発行

  • GitHub Actionsを利用したCI/CD自動化

SPAプロジェクトのローカル開発環境構築から
サーバーデプロイ自動化まで直接チャレンジしてみてください!✌

📢 受講前にご確認ください!

  • 本講義はReactおよびNode.jsの文法については説明せず、開発環境の構築とデプロイについて扱います。
  • 講義資料はセクション1 - SPA開発環境構成(1)の授業でダウンロードできます。

React SPAプロジェクト、
サーバーデプロイ + 自動化まで 💡

フロントエンド環境とAPIサーバーを開発したものの、いざどのようにデプロイすべきか途方に暮れていませんか?馴染みのない開発環境のセットアップとデプロイCI/CDのフローを身につけたいと思いませんか?

この講義では、Reactプロジェクトのローカル開発環境構築およびサーバーデプロイ自動化プロセスを直接体験してみます。既存のWeb開発方式とは異なるReactを利用したシングルページアプリケーション(SPA)開発環境を扱い、これをサーバーにデプロイしてサービスする方法について紹介します。また、Swaggerを利用したAPI文書自動化も併せて扱い、ローカル開発環境とデプロイされるサーバー環境との違いを学ぶことができます。

Windowsを基準に動画を作成しましたが、MacやLinuxでもほぼ同じように進めることができます。開発環境のセットアップから配信、自動化がどのように行われるのか、講義で直接確認してみてください!


こんな方におすすめです 🎁

  • ✅ 文法中心よりもサービス中心の開発を好む方
  • ✅ サーバーで動作するコードをどのようにアップロードするかわからない方
  • ✅ クラシックWebとの違いを知りたい方
  • ✅ AWSの使用が初めてだったり、HTTPSサーバー構成を学びたい方

📌 講義で使用されるスキルまとめ

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問題とビルド環境変数の構成


知識共有者紹介 ✒️

Kenu (허광남)

時々YouTubeでプログラミング配信をしています。

  • 2000.12 OKJSP開始 → 現在はokky.krで運営中
    • 日間訪問者数50,000名の国内主要開発者コミュニティ
  • okdevtv.com プログラミング放送BJ
  • 元'18~'19 ペットフレンズ CTO
  • 元'17~'18 ハローネイチャー CTO
  • 前 '15~'17 GS SHOP ベンチャー投資チーム CoE パート
  • 元'12~'16 電子政府標準フレームワーク エバンジェリスト

はじめまして、Kenuです!

Hello Worldを出力すれば開発準備は完了です!単純にコードを書いた経験があるというレベルで終わるのではなく、自分が作ったアプリケーションを人々が使えるようにサーバーに自分が作ったコードをアップロードしてサービスできる自信が生まれます。


Q&Aを確認してみてください!💬

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分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

46件

4.6

46件の受講レビュー

  • meltep00님의 프로필 이미지
    meltep00

    受講レビュー 9

    平均評価 4.4

    5

    100% 受講後に作成

    講義でも言及しますが、ReactやNode.jsについて扱う講義ではありません。簡単ですが、CI / CDはプログラムの継続的な発展のために必要なコースです。 良い講義はよく聞きました:)

    • kenuheo
      知識共有者

      良い受講評ありがとうございます。 幸せです。 😊

  • ew2io3ogji23님의 프로필 이미지
    ew2io3ogji23

    受講レビュー 4

    平均評価 5.0

    5

    100% 受講後に作成

    プログラミングに入って、ちょうどローカルで開発してプロジェクトを簡単に作ることができるようになりましたが、このような開発環境の設定と配布CI/CDについては不慣れで理解しにくく接するのが難しかったです。 特に、サーバーで何をするのか理解が難しかったのですが、インストールするページ案内から環境設定まで説明してくれ、全体的な生成 - 設定 - 簡単なエラー解決 - 展開まで取り上げて、1サイクルを回すことができるようになりました。 学ぶときに一番難しいのが経験してみなかったことをそうしてやむを得ず抽象的な理解に移らなければならない部分なのにこうやったサイクルを回して再び講義資料を見たら経験に基づいて 'あ、さっきしたそれだ!&#x27 ;しながら得ていく方が多くなるようです。 開発環境の設定から配布まで使用されるプロジェクト(React..など)や詳細な説明を得るための方ではなく、'一体プロジェクトをどのように作って設定して配布し、それを自動化しないのか?できなかった方が聞くととてもいいようです。 まだ現業で仕事をしてみた経験がなくて講義で習得した知識をどれだけ活用できるかは分からないが、後でプロジェクトや現業で仕事をするときに講義を通じて得た経験を思い出して学習の基盤を設けることができることを確信し、この講義が私のような初心者にたくさん知られてほしいですね! 良い講義ありがとうございます。

    • kenuheo
      知識共有者

      受講後ありがとうございます。助けてくれて嬉しいです。 開発+配布環境を構築することは基本です。ここに必要なサービスを作成するには、より多くの努力が必要です。 良いサービスをしてください。 応援します!

  • yeslee님의 프로필 이미지
    yeslee

    受講レビュー 4

    平均評価 5.0

    5

    100% 受講後に作成

    配布に関して散らばった概念を一度に集めることができ、有益な講義でした。 頑張って、何をもっと集中的に勉強しなければならないのか感がありました。

    • mike2ox님의 프로필 이미지
      mike2ox

      受講レビュー 1

      平均評価 5.0

      5

      75% 受講後に作成

      for 支払い 悩む受講生 - 毎回ローカルでのみ動作し、CI/CDを考慮した序盤の開発環境の構築はしなかったが、本講義を通じて簡単ですが、全体のプロセスがどのように進行されるべきかを知ることができてよかったです。 - だから、環境設定のために作成したコードやインストールしたパッケージ/フレームワークの説明は省略されていることに留意しておきたいと思います。 - おそらくWeb開発自体も初めてなのに '最近CI/CDは必須だからただ受講しなければならない'という考えで講義を聞いた初級者の方も多いでしょう。あなたのプロジェクトに合わせてCI / CDをカスタマイズする必要があるかもしれません。添付されたコードの意味を参考に調べてみると、CI/CDをきちんと理解することになるのではないでしょうか。 結論 - CI/CD 大枠をつかむ目的で聴く開発者の方がおすすめ - 深くカスタマイズする必要があるときは、本講義コードを分析していき、必要な部分を追加学習すれば、実力向上に役立つことが多いと期待 - 良い講義を開いてくれてありがとう!

      • kenuheo
        知識共有者

        受講評 ありがとうございます。 幸せなプログラマーになってください。

    • saokm50392님의 프로필 이미지
      saokm50392

      受講レビュー 4

      平均評価 4.5

      5

      100% 受講後に作成

      良い講義ありがとうございます! 配布自動化の内容だけでなく、基礎的なツールの使い方まで詳細に知ることができ、多くのお役に立ちました。 ずっとPHPだけやってきてフロントバックの分離がきちんとできなかったのに良い講義を見て初めて分離してみて直接配布までしてみました。 また、githubの使用まで学ぶ機会があり、多くの助けになりました。 ありがとうございます。

      • kenuheo
        知識共有者

        良いレビューありがとうございます。 SPAは扱うようにフロントエンドがもう一つあって、その部分に集中しました。 幸せなプログラマーになってください。

    ¥5,473

    kenuheoの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!