プログラミング学習初心者のための情報メディア by Proglus（プログラス）
地域によっては、外出自粛要請がでています。
不要不急な外出は控えて、自宅でオンライン動画をつかって学習しませんか？
世界最大級の学習プラットフォームUdemy(ユーデミー)で使える、期間限定の割引クーポンを配布します。
2021/11/01（月）より1ヶ月
下記リンクを経由すると、Udemyコースが割引価格で受講できます。
このコースが気に入ったら、ぜひレビュー投稿をお願いいたします。
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
本記事は、Udemy「Nuxt.js入門決定版！」 、Proglus（プログラス）「Nuxt.js」サポート記事です。
記事では、
macOS, Windows共通: ユーザーのホームディレクトリ直下の、”nuxt-projects” という名前のディレクトリ（フォルダ）を作成して作業します。
create-nuxt-appというnuxt.jsプロジェクトの雛形を作るアプリケーションを使います。
記事では、プロジェクト名は”hello”とします。
学習内容により、適宜プロジェクト名を変更してください。
操作例)
$ cd nuxt-projects
これで、nuxt-projects配下に、helloプロジェクトのディレクトリが作成されるように準備ができました。
エンターキー押下して次へ進める。
$ npx create-nuxt-app hello
エンターキー押下して次へ進める。
補足：プロジェクト名である、”hello”の部分は、学習内容により適宜変更してください。
create-nuxt-app v3.7.1 の質問項目と、設定内容は、下記となります。
尚、バージョンアップにより、質問項目が変更となる場合があります。
Generating Nuxt.js project in hello
? Project name: (hello)
プロジェクトネームを設定できます。カッコの中のhelloがデフォルトの値です。
デフォルトの値を使いたいので、そのままエンターキーを押下。
? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript
プログラミング言語を選択します。
このコースではJavaScriptを利用します。
JavaScriptにカーソルがあたっている状態で、エンターキー押下
? Package manager:
Yarn
❯ Npm
パッケージマネージャーを選択します。
ざっくりいうと、ソフトウェア管理ツールです。
このコースでは、Npmを利用します。
エンターキー押下
? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Framevuerk
Oruga
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js
UIフレームワークを選択します。
知名度が高いものでいうと、たとえば、boostrapがあります。
ここでは選択しないので、Noneを選択した状態で、
エンターキー押下
? Nuxt.js modules:(Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯◯ Axios – Promise based HTTP client
◯ Progressive Web App (PWA)
◯ Content – Git-based headless CMS
Nuxt.jsのモジュールを追加する場合は、選択するのですが、
ここでは、なにも選択しないで、エンターキー押下
? Linting tools:(Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint
Linting toolsを選択できます。
ざっくりいうと、コードレビューツールですが、ここでは使わないので、そのままエンターキー押下
? Testing framework: (Use arrow keys)
❯ None
Jest
AVA
WebdriverIO
Nightwatch
テストフレームワークの選択です。
ここでは使わないので、Noneを選択して、エンターキー押下
? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
Single Page App
レンダリングモードを選択します。
ざっくりいうと、
Universalは、サーバー側で、jsを実行してレンダリングするモード。
Single Page Appは、クライアント側でjsを実行してレンダリングするモード。
ここでは、Universalを選択します。
補足：セクション「Nuxt.js & FirebaseによるSPA開発入門」の場合は、
Choose rendering modeの選択で、Single Page Appを選択してください。
エンターキー押下
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/Jamstack hosting)
Serverの方は、node.jsとして サーバーで動かす場合に選択、
Staticは、静的なファイルとして、静的ファイルを書き出して動作するので静的ホスティングサービス上にデプロイする場合に選択。
ここでは、Serverを選択します。
エンターキー押下
? Development tools: (Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯● jsconfig.json (Recommended for VS Code if you’re not using typescript)
◯ Semantic Pull Requests
◯ Dependabot (For auto-updating dependencies, GitHub only)
開発ツールの設定に関する項目です。
VS Codeを使うので、jsconfig.jsonにチェックを入れます。スペースキーを押して、黒丸になれば、選択状態です。
エンターキー
? What is your GitHub username? (naka)
GitHubのユーザー名を入れます。特に理由がなければ、デフォルトの設定でOKなので、エンターキーをおしてください。
Version control system:
❯ Git
None
ソースコードのバージョンコントロールで、Gitを使うかの選択です。
コース内では、Gitは使いませんが、後で使いたくなることを考慮して、Gitを選択してエンターキー押下。
処理が行われます。数分掛かります。
“Successfully”と表示されればOKです。
ターミナルで、下記を実行。
helloディレクトリに移動
$ cd hello
開発モードでサーバーを起動
$ npm run dev
画面に表示されているURL(例：http://localhost:3000/)をコピー、
Google ChromeでURLを開いてください。
このような、画面が表示されていればOKです。
補足：学習タイミングによってはUIが異なることが想定されます。
次のレクチャーへ進んでください。
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
GCP(Google Cloud Platform)の学習が終わりリソースをクリーンアップした後に、本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってる確認する方法について解説します。
このコースは、Udemyコース「最速で学ぶ – Google Cloud Platform（GCP）入門完全攻略コース」と、Proglus（プログラス）で公開しているオンラインコース「Google Cloud Platform（GCP）入門」のサポート記事です。
結論としては「GCPのお支払いページで日毎の利用料がゼロになったのを確認する」ことが確実です。
GCP(Google Cloud Platform)の学習が終わりリソースをクリーンアップした後に、本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってる確認する方法について解説しました。
クラウドの利用に慣れていない場合、料金面が不安になる方も多いと思います
利用料レポートを日々確認して異常のないことを確認しましょう。
また、学習が終わり、当面GCPを使わない場合には、忘れないうちに「プロジェクトの削除」「Cloud 請求先アカウントを閉鎖する」を実行するとよいでしょう。
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
この記事では、AWS Cloud9のEC2インスタンスに立てたMySQLサーバーに、ローカル環境のMySQLクライアント(MySQL Workbench) から接続する方法についてご説明します。
この記事は、Udemyオンライン講座「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう」とProglus「Ruby on Rails5入門」のサポート記事です。
なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。
・クラウドコンピューティングサービスのAWSで利用できるサービスの一つです。
・クラウド上のサーバー資源を利用して、ブラウザ上の統合開発環境(IDE)でWebアプリケーションを開発することができます。
・Cloud9を起動すると、AWSのEC2インスタンスに接続され、開発を進めることができます。
Webサービスの開発を進める上で、MySQLサーバーに接続してSQLコマンドを実行し、DB操作を行う場面は多々あります。
そしてクラウド上で動くリモートのMySQLサーバーに接続するためには、SSH接続などで認証する必要があります。
Cloud9で開発を行う場合、EC2インスタンスが自動的にブラウザ上のIDEと接続されます。そのため認証情報がユーザーに見えない形となっているので、Cloud9のEC2環境で起動しているMySQLサーバーに接続するためには少し工夫が必要です。
ここでは、Cloud9のMySQLサーバーにローカル環境から接続するまでの流れについて解説します。
解説で用いる主なバージョンについては以下の通りです。
ローカル環境:
PC: MacBook Pro 13-inch(2020, intelプロセッサ)
MySQL Workbench: 8.0.25
Cloud9環境:
インスタンスタイプ: t2.micro (1 GiB RAM + 1 vCPU)
プラットフォーム: Ubuntu Server 18.04 LTS
MySQL: 8.0.25
SSH接続でリモートサーバーとの認証に用いるため、まずは公開鍵・秘密鍵のキーペアを作成します。
まずawsのEC2コンソールを開き、「キーペア」を選択します。
「キーペアを作成」を押し、新規作成を行います。
キーペア名を入力し、ファイル形式としてpemを選択します。「キーペアを作成」を押します。
するとcer形式のファイルとして秘密鍵がダウンロードできるので、分かりやすい場所に保存しておきます。
この秘密鍵は再発行ができないので、もしファイルを削除してしまった場合は、もう一度新しいキーペアの作成を行なってください。
先ほどダウンロードした秘密鍵から、公開鍵を生成します。
公開鍵の生成にはssh-keygenコマンドを使用します。
$ ssh-keygen -y -f {秘密鍵ファイルまでのパス}
ssh-rsa .....
出力のssh-rsaで始まる文字列が公開鍵となります。
以下のようなエラーが発生する場合は、秘密鍵のファイルの権限を変更する必要があります。
$ ssh-keygen -y -f demo.cer @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Permissions 0644 for '/Users/ricky/Downloads/demo.cer' are too open. It is required that your private key files are NOT accessible by others. This private key will be ignored. Load key "/Users/ricky/Downloads/demo.cer": bad permissions
chmodコマンドを管理者権限で実行し、0600を指定します。
sudo chmod 0600 {秘密鍵ファイルまでのパス}
公開鍵が出力できたら、Cloud9の開発環境を起動してください。
ターミナルで以下のように入力し~/.ssh/authorized_keysファイルを開きます。
$ vim ~/.ssh/authorized_keys
出力された公開鍵を、以下のようにファイル下部に新しく貼り付けます。
ここで既に存在する鍵は絶対に削除しないでください。Cloud9のコンソールからブラウザ開発環境に接続できなくなります。
次に、ローカルPCからCloud9のEC2インスタンスにSSHできるように、セキュリティグループの設定を変更します。
Cloud9のコンソールで環境名をクリックし、詳細画面に飛びます。
「Go To Instance」をクリックすると、Cloud9の環境があるEC2インスタンスの詳細画面に飛びます。
「セキュリティ」から「セキュリティグループ」のリンクをクリックし、セキュリティグループの詳細に飛びます。
「インバウンドルールの編集」をクリックします。
ローカルのPCからの接続を許可するため、ソースに「0.0.0.0」と「::/0」を追加しましょう。完了したら、「ルールを保存」をクリックします。
これでネットワーク周りの設定は完了です。ローカルPCからSSHができることを確認しましょう。
もう一度EC2インスタンスの詳細を開き、インスタンスのグローバルIPを確認します。
そして以下のコマンドで接続します。
$ ssh -i {秘密鍵ファイルまでのパス} ubuntu@{EC2インスタンスのグローバルIP}
上手くいけば、EC2環境にSSHで入ることができるはずです。
次はWorkbenchで接続情報を入力し、Cloud9のEC2環境で起動しているMySQLサーバーに接続してみましょう。
MySQLは既にセットアップ済みで、起動状態であるとします。
Workbenchを起動します。
「MySQL Connections」の右の「+」アイコンをクリックします。
すると接続の設定画面が表示されます。
まず、Connection Nameで適当なコネクション名を設定します。そしてConnection Methodの部分で「Standard TCP/IP over SSH」を選択します。
次はSSH認証に関する設定を行います。SSH HostnameにはEC2インスタンスのパブリックIPを入力し、SSH UsernameにはEC2インスタンスのユーザー名を入力してください。
SSH Key Fileでは、先ほどssh-keygenで作成した秘密鍵のファイルまでのパスを指定します。
デフォルトの場合は図の通りですが、MySQLの設定に変更がある場合は、ホスト名やポート番号、ユーザー名も適宜変更を行ってください。
これで準備が整いました、Test Connectionを押してCloud9上のMySQLサーバーとの接続確認を行います。
以下のように表示されたら成功です。
「OK」ボタンを押せば、WorkbenchからMySQLサーバーに接続することができます。
これで、Cloud9のMySQLサーバーにローカル環境から接続することが出来ました！
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
create-nuxt-appを利用すると、その時点での最新のNuxt.jsでプロジェクトが作成されます。
最新バージョンでは、コースの通り進めることができなくて、本質的ではないところで躓いてしまいますので、コースで使用しているバージョンにダウングレードします。
本コースは、この記事は、Udemyにて公開中のオンライン講座「Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」及びのProglus（プログラス）で公開中のオンライン講座「Nuxt.JS入門」サポート記事です。
流れはこのようになっています。
この記事では、3.15系から2.8系へダウングレードする方法について紹介します。
node_modules フォルダを削除します。
v2.8当時の書き方に修正する。
修正前
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
↓
修正後
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"export": "nuxt export",
"serve": "nuxt serve"
},
"nuxt": "<2.9"
@babel/preset-envのエラーが出ないように検証した結果を反映している。
build: {
}
↓
build: {
babel: {
presets({isServer}) {
const targets = isServer ? { node: 'current' } : { ie: 11 }
return [
[ require.resolve("@babel/preset-env"), { targets } ]
]
},
plugins: [
"@babel/syntax-dynamic-import",
"@babel/transform-runtime",
"@babel/transform-async-to-generator"
]
}
}
v2.8当時の書き方に修正する。
<template>
<Tutorial/>
</template>
<script>
export default {}
</script>
↓
<template>
<section class="container">
<p>Hello World</p>
</section>
</template>
<script>
export default {}
</script>
$ cd hello $ npm install
補足：cd helloは、現在のディレクトリがhelloではない場合のみ(helloがカレントディレクトリではない場合のみ)、実施する
$ npm run dev
※ 終了する場合はcontrol + c
Nuxt.jsバージョン確認＆Google Chromeで指定のURLを開く
ページにHello World!と表示されれば動作確認OK。
Q. 記事の通り実行してもバージョンが変更されません。
Ans. 各種編集後のファイルが保存されていないケースが多いです。再度ご確認ください。
ダウングレードするとプロジェクト直下にpluginsフォルダや、assetsフォルダ等ができない場合があるようですが、手動で作成すれば動作します。
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する