2022-10-13

flask

python

Posted by

applemango

最終更新: 2023-03-05

さあhello world!を実行しましょう

info

テスト環境

windows:

- windows 10 home

- python 3.9

- node 16.14.2

- npm 8.5.0

- yarn 1.22.18

mac:

- venture 13.21

- MacBook pro (M2 pro)

- python 3.11.2

- node 18.14.2

- yarn 1.22.19

pythonとnode.jsとnpmの三つは入ってる前提で進めます

長々と書いていますが下のcommandを順番に入力すると終わります

終わった場合は"フォルダー構成の確認"まで飛ばしてください

info

途中

"√ What is your project named?"と聞かれます

ファイルの名前です例では"page"と答えています

" Would you like to use ESLint with this project?"とも聞かれます

デフォルトではYesです、例でもYesと答えています

A:/abc/osaka>mkdir main

A:/abc/osaka>cd main

A:/abc/osaka/main>npx create-next-app@latest --ts
√ What is your project named? ... page
√ Would you like to use ESLint with this project? ... No / Yes
Creating a new Next.js app in A:\abc\osaka\main\page.

Using npm.

Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next


added 236 packages, and audited 237 packages in 47s

78 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initializing project with template: default

Initialized a git repository.

Success! Created my-app at A:\abc\osaka\main\page


A:/abc/osaka/main>mkdir api

A:/abc/osaka/main>cd api

A:/abc/osaka/main/api>python -m venv venv

A:/abc/osaka/main/api>
apple@apple ~ % mkdir main
apple@apple ~ % cd main
apple@apple main % npx create-next-app@latest --typescript
✔ What is your project named? … page
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /Users/apple/Documents/docs/trash/main/page.

Using npm.

Initializing project with template: default 


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next


added 270 packages, and audited 271 packages in 1m

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created page at /Users/apple/Documents/docs/trash/main/page

apple@apple main % mkdir api
apple@apple main % cd api
apple@apple api % python3 -m venv venv
apple@apple api % 

エラーを解決する

macの場合途中以下のようなエラーが出る場合があります

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/apple/.npm/_cacache/index-v5/37/4d
npm ERR! errno EACCES
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 502:20 "/Users/apple/.npm"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/apple/.npm/_logs/2023-03-04T12_30_53_213Z-debug-0.log

この場合は以下のコマンドを実行してみてください

apple@apple main % sudo chown -R 502:20 "/Users/apple/.npm

これでも治らない場合は以下のコマンドでいけるかもしれません

apple@apple main % sudo npm cache clean --force

frontendの準備

適当な名前のfolderを作り作ったディレクトリ内で以下のcommandを実行します

info

以下のcommandはnext.jsのprojectを作成するcommandです

javascriptを使用する場合は npx create-next-app@latest で作成出来ます

今回は npx create-next-app@latest --ts を使用します一応yarnのコマンドも載せておきます

info

解説ではファイル名を

baseディレクトリ -> main

next.js -> page

flask -> api

にしています

info

先ほども言いましたが途中

"√ What is your project named?"と聞かれます

ファイルの名前です例では"page"と答えています

" Would you like to use ESLint with this project?"とも聞かれます

デフォルトではYesです、例でもYesと答えています

A:/abc/osaka/main>npx create-next-app@latest --ts
A:/abc/osaka/main>yarn create next-app --typescript
apple@apple main % npx create-next-app@latest --ts
apple@apple main % yarn create next-app --typescript

実行したら以下の二つのどちらかのようなフォルダ構成になっているはずです

main(作ったフォルダー

page(入力した名前のフォルダ

.git

node_modules

pages

public

styles

.eslintrc.json

next.config.js

next-env.d.ts

package.json

README.md

tsconfig.json

yarn.lock

main(作ったフォルダー

page(入力した名前のフォルダ

.git

node_modules

pages

public

styles

.eslintrc.json

next.config.js

next-env.d.ts

package-lock.json

package.json

README.md

tsconfig.json

これでfrontendは準備できました次はbackendを準備しましょう

backendの準備

mainディレクトリ直下にapiと言うフォルダーを作成しfolderに移動し以下のコマンドを実行してください

A:/abc/osaka/main/api>python -m venv venv
apple@apple api % python3 -m venv venv

info

因みにvenvコマンドの二つ目の引数でフォルダの名前を変えることができます

python -m venv 任意の名前

これで準備は終わりです

フォルダー構成の確認

以下のようになっていれば終了です

main

page

.git

node_modules

pages

public

styles

.eslintrc.json

next.config.js

next-env.d.ts

package.json

README.md

tsconfig.json

yarn.lock

api

venv

切りが良いのでhello, world!は次書きます

(分割しただけだけど)

このドキュメントどう?

emoji
emoji
emoji
emoji