マイクロソフトの公式ドキュメントを参考 参考URL Node.jsプロジェクトの場合 1.「新しいnpmパッケージのインストール」をクリック 2.パッケージを検索し、「パッケージのインストール」をクリック 画像はjQueryをインストールしている。 .Net Coreプロジェクトの場合 1.拡張機能タブ > 拡張機能の管理 > 「Package Installer」をインストールする 2.「Quick Install Package...」をクリック 結果 node_modulesフォルダができて、中にjQueryができる。 3.「wwwroot」フォルダに追加するように変えたい場合は... NuGetパッケージより、「BuildBundlerMinifier」をインストールする 「bundleconfig.json」ファイルを新規作成する。 以下のように中身を書き換える [ { "outputFileName": "wwwroot/lib/jquery.js", "inputFiles": [ "node_modules/jQuery/tmp/jquery.js" ], "minify": { "enabled": true, "renameLocals": true } } ] これで、node_modules内のjuery.jsがwwwrootに追加される。 ちなみに package.jsonを直接作って、インストールするパッケージを入力して保存すれば、 勝手にインストールしてくれる こんな感じ { "name": "myproject", "version": "1.0.0", "devDependencies": { "jQuery": "^1.7.4", "gulp": "4.0.2", "@types/jquery": "3.3.33" } }

この記事は、関口 厚がポートフォリオ用に開発したWEBアプリの紹介記事です。 アプリの概要 アプリ名：ひとこと日記ver2 日々の記録をテキスト形式で保存する、シンプルな日記アプリです。 コードはGithubにてご覧いただけます。(フロントエンドのコード・バックエンドのコード) 作成環境 ・インフラ：AWS ・バックエンド：node.js ＋ Express ・フロントエンド：Vue.js ・データベース：MySQL ●各バージョン node.js v12.18.2, Express 4.17.1, Vue.js 2.6.12, Veu-CLI 4.4.6, MySQL 8.0 アプリで行う主な処理 ユーザー登録・認証処理 日記のCRUD処理 アプリの構成 ・インフラは、AWSのEC2上にExpressサーバーを立て、RDS上にMySQLデータベースを立てています。 ・フロントエンドは、Veu-CLIを使って構築し、SPAにしています。（Nuxt.jsは使っていません） ・Expressサーバーにて、SPAのホスティングと、データベース処理用のエンドポイントの提供を行っています。 ・Vue.js-Express間の通信は、axiosでデータをやり取りしています。 サーバーとクライアントの構成図 ユーザー登録・認証機能の動作 ・UIからユーザー登録、ログインを行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、ユーザー登録、ログインの処理を実現します。 ・ログインするとトークンが発行され、以降の処理はトークンによってユーザーを一意に特定します。 日記機能の動作 ・UIから日記の表示・作成・更新・削除を行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、日記のCRUD処理を実現します。 ・axios通信時にサーバーにトークンを送信することで、ユーザーを一意に特定して、日記データを処理します。 フォルダツリー ●vuecli-appのフォルダ構成（フロントエンド） [ルート] └ [public]フォルダ └ [images]フォルダ 　└ 各種imageは全てここに格納 └ index.html └ favicon-diary.ico └ [src]フォルダ └ [asset]フォルダ └ [components]フォルダ 　└ [diary]フォルダ　日記関係のVueコンポーネントを格納するフォルダ └ Index.vue　トップページ（アプリの紹介ページ） └ Mypage.vue　日記の一覧表示ページ └ Edit_Create.vue　日記作成ページ └ Edit_Update.vue　日記更新・削除ページ └ Header.vue　ログイン時のヘッダーコンポーネント └ Help.vue　機能紹介ページ 　└ [login]フォルダ　ユーザー認証関係のVueコンポーネントを格納するフォルダ └ Regist.vue　ユーザー登録ページ └ Login.vue　ログインページ └ Trial.vue　お試しユーザーログインページ └ App.vue └ main.js └ router.js　Vue.jsのルーティングを記述したJS └ store.js　Vuexの設定を記述したJS ●express-appのフォルダ構成（バックエンド） [ルート] └ [public]フォルダ　ビルドしたVue.jsのファイルをここに格納している。 └ 各種ファイル。Vue-CLIでビルドしたdistフォルダ内のファイルをそのままコピーしたもの。 └ [routes]フォルダ　axiosリクエストのエンドポイントを提供するためのルーターモジュールを格納したフォルダ └ get_diaries.js　一ヶ月分の日記を取得する処理のモジュール └ get_one_diary.js　一日分の日記を取得する処理のモジュール └ edit_create.js　日記を作成する処理のモジュール └ edit_update.js　日記を更新する処理のモジュール └ edit_delete.js　日記を削除する処理のモジュール └ user_regist.js　ユーザー登録する処理のモジュール └ user_login.js　ログインする処理のモジュール └ user_delete.js　ユーザーを削除する処理のモジュール └ user_auth.js　認証トークンを延長する処理のモジュール └ [function]フォルダ　サーバーに機能を与えるモジュールを格納したフォルダ └ db_connect.js　データベース接続設定モジュール └ token.js　認証トークン発行モジュール └ clear_auth.js　有効期限切れのトークン情報を削除するモジュール └ app.js

この記事は、関口 厚がポートフォリオ用に開発したWEBアプリの紹介記事です。 アプリの概要 アプリ名：ひとこと日記ver2 日々の記録をテキスト形式で保存する、シンプルな日記アプリです。 コードはGithubにてご覧いただけます。(フロントエンドのコード・バックエンドのコード) 作成環境 ・インフラ：AWS ・バックエンド：node.js ＋ Express ・フロントエンド：Vue.js ・データベース：MySQL ●各バージョン node.js v12.18.2, Express 4.17.1, Vue.js 2.6.12, Veu-CLI 4.4.6, MySQL 8.0 アプリで行う主な処理 ユーザー登録・認証処理 日記のCRUD処理 アプリの構成 ・インフラは、AWSのEC2上にExpressサーバーを立て、RDS上にMySQLデータベースを立てています。 ・フロントエンドは、Veu-CLIを使って構築し、SPAにしています。（Nuxt.jsは使っていません） ・Expressサーバーにて、SPAのホスティングと、データベース処理用のエンドポイントの提供を行っています。 ・Vue.js-Express間の通信は、axiosでデータをやり取りしています。 サーバーとクライアントの構成図 ユーザー登録・認証機能の動作 ・UIからユーザー登録、ログインを行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、ユーザー登録、ログインの処理を実現します。 ・ログインするとトークンが発行され、以降の処理はトークンによってユーザーを一意に特定します。 日記機能の動作 ・UIから日記の表示・作成・更新・削除を行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、日記のCRUD処理を実現します。 ・axios通信時にサーバーにトークンを送信することで、ユーザーを一意に特定して、日記データを処理します。 フォルダツリー ●vuecli-appのフォルダ構成（フロントエンド） [ルート] └ [public]フォルダ └ [images]フォルダ 　└ 各種imageは全てここに格納 └ index.html └ favicon-diary.ico └ [src]フォルダ └ [asset]フォルダ └ [components]フォルダ 　└ [diary]フォルダ　日記関係のVueコンポーネントを格納するフォルダ └ Index.vue　トップページ（アプリの紹介ページ） └ Mypage.vue　日記の一覧表示ページ └ Edit_Create.vue　日記作成ページ └ Edit_Update.vue　日記更新・削除ページ └ Header.vue　ログイン時のヘッダーコンポーネント └ Help.vue　機能紹介ページ 　└ [login]フォルダ　ユーザー認証関係のVueコンポーネントを格納するフォルダ └ Regist.vue　ユーザー登録ページ └ Login.vue　ログインページ └ Trial.vue　お試しユーザーログインページ └ App.vue └ main.js └ router.js　Vue.jsのルーティングを記述したJS └ store.js　Vuexの設定を記述したJS ●express-appのフォルダ構成（バックエンド） [ルート] └ [public]フォルダ　ビルドしたVue.jsのファイルをここに格納している。 └ 各種ファイル。Vue-CLIでビルドしたdistフォルダ内のファイルをそのままコピーしたもの。 └ [routes]フォルダ　axiosリクエストのエンドポイントを提供するためのルーターモジュールを格納したフォルダ └ get_diaries.js　一ヶ月分の日記を取得する処理のモジュール └ get_one_diary.js　一日分の日記を取得する処理のモジュール └ edit_create.js　日記を作成する処理のモジュール └ edit_update.js　日記を更新する処理のモジュール └ edit_delete.js　日記を削除する処理のモジュール └ user_regist.js　ユーザー登録する処理のモジュール └ user_login.js　ログインする処理のモジュール └ user_delete.js　ユーザーを削除する処理のモジュール └ user_auth.js　認証トークンを延長する処理のモジュール └ [function]フォルダ　サーバーに機能を与えるモジュールを格納したフォルダ └ db_connect.js　データベース接続設定モジュール └ token.js　認証トークン発行モジュール └ clear_auth.js　有効期限切れのトークン情報を削除するモジュール └ app.js