小村の開発環境構築（１０） Nuxt.jsアプリの構成変更
こんばんは、小村だよ！
今日は前回の続き、Nuxt.jsで作成したアプリの構成を変更していくよ！
やること
- Nuxt.jsアプリのcommit
- フォルダ構成変更
事前準備
手順
なにはともあれcommit
前回create-nuxt-appで作成したアプリをcommitするよ！
まず念のため動くことを確認しようか
cd src yarn run dev
画像撮るまでもなく動きますた。いいねばっちり！
それでは記念すべき最初のcommit！問題なく……
Commitができない
 |
問題あるんだが？？？
なんぞ？？？ソース管理に何も表示されねンだが？？？
え、めっちゃファイル作られてるよ？？？なんぞ？？？
調査
 |
ためしに
git statusしてみるふんふん、こっちだと変更を認識してるね
その後下記を試す。ソース管理に表示されたのが〇、されないのが×
×：ソース管理を更新
×：画面をリロード
〇：LITTLE-VILLAGEプロジェクト直下のREADMEを修正
×：srcフォルダ直下にファイルを新規作成
〇：src2フォルダを作成してその配下にファイルを新規作成
〇：src2フォルダにsrcフォルダの中身をすべてコピー
〇：srcフォルダを消してscr2フォルダの名称をsrcに変更
理由はわからないけどcreate nuxt-appで作成されたフォルダが認識されない模様
上記で直ったし、検証の仕方もわからないのでなかったことにしよ……
改めてcommit
 |
 |
それでは記念すべき最初のcommit！問題なく実行できたよ！（なかったことにした）
ちなみに私はgit操作をVSCodeのソース管理で実行することが多いです。
- 前項の件もあるし、コマンド使っていったほうがいいかもなぁ……
ちなみにちなみに、エディタ側で開いているのは[git graph]という拡張機能
 |
ソース管理のところのアイコンから開きます。
GitHubのgraphと同じような図が見られる。めっちゃ便利で超愛用！
フォルダ構成変更
次にcreate nuxt-appで作成されたフォルダ構成を変えていきます！
ざっくりと説明すると
プロジェクト直下：configなど、webサイトに間接的に関わるファイル群
srcフォルダ配下：webサイトの内容に直接かかわるソース群
というフォルダ構成に変更していきます
ではでは、srcフォルダ内の下記をプロジェクト直下に移動するよー
| 種類 | プロジェクト直下へ移動 | 備考 |
|---|---|---|
| フォルダ | .github | |
| フォルダ | .nuxt | 削除のほうがいいかも |
| フォルダ | node_modules | 削除のほうがいいかも（したらyarn install） |
| ファイル | .babelrc | |
| ファイル | .editorconfig | |
| ファイル | .eslintrc.js | |
| ファイル | .gitignore | |
| ファイル | .prettierrc | |
| ファイル | commitlint.config.js | |
| ファイル | jest.config.js | |
| ファイル | jsconfig.json | |
| ファイル | nuxt.config.js | |
| ファイル | package.json | |
| ファイル | README.md | 既存ファイルに内容をコピペ |
| ファイル | stylelint.config.js | |
| ファイル | yarn.lock |
 |
こんな感じのフォルダ構成になると思います
そしてsrcフォルダ配下に残るのは下記
| 種類 | プロジェクト直下へ移動 | 備考 |
|---|---|---|
| フォルダ | assets | |
| フォルダ | components | |
| フォルダ | content | |
| フォルダ | layouts | |
| フォルダ | middleware | |
| フォルダ | pages | |
| フォルダ | plugins | |
| フォルダ | static | |
| フォルダ | store | |
| フォルダ | test |
そしたら最後に、[nuxt.config.js]を開いての4行目に下記の１文を加えるよー
これで、[yarn run dev]をプロジェクト直下で実行できるようになります
srcDir: 'src/'
 |
ちなみに[nuxt.config.js]を開くとLinterが働いて図のようにめっちゃ赤い
まぁひとまずは放置。今はファイルを閉じれば解消される（はず）
もし解消されなければ、今後の記事のLinterやFormatter設定を先にやるとよいかも
起動確認
- では下記を実行してプロジェクト配下からサーバを立ち上げます
# srcフォルダからプロジェクト配下に戻る cd ../ # サーバ立ち上げ yarn run dev # 画像ではnpm run devでやっちゃってるけどyarnで慣れたほうがよき
 |
問題なく起動してますね。ブラウザも確認し問題なし！
ではこれでcommitしまーーーす！
おわりに
今日はこの辺でおーーーしまい！ソース管理のなんだったんだろうなー
では、今後やることとして
ひとまずherokuへデプロイ
サーバの立ち上げにdockerを使用するように構成変更
create-app だけでは足りていなかった設定の追加
Linter、Formatter等のconfig設定を変更
あたりを終えてようやく開発に移れる感じです。
このへんからだいぶ未知の領域に入っていくから調べる時間長くなりそう
どこから手をつけようかなー
ではではひとまず、ちゃお～～～！
