https://github.com/q23isline/study_vuetify
AWS SAM ( Python ) と Vuetify 勉強用リポジトリ
https://github.com/q23isline/study_vuetify
docker docker-compose dockero-compose github-actions python sam vuejs vuetify
Last synced: 3 months ago
JSON representation
AWS SAM ( Python ) と Vuetify 勉強用リポジトリ
- Host: GitHub
- URL: https://github.com/q23isline/study_vuetify
- Owner: q23isline
- License: mit
- Created: 2024-12-07T00:01:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-20T06:20:13.000Z (12 months ago)
- Last Synced: 2025-07-20T08:26:51.207Z (12 months ago)
- Topics: docker, docker-compose, dockero-compose, github-actions, python, sam, vuejs, vuetify
- Language: Vue
- Homepage:
- Size: 225 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# study_vuetify
[](./LICENSE)
[](https://github.com/q23isline/study_vuetify/actions/workflows/python.yml)
[](https://github.com/q23isline/study_vuetify/actions/workflows/nodejs.yml)
[](https://github.com/q23isline/study_vuetify/actions/workflows/dockerfile.yml)
[](https://open.vscode.dev/q23isline/study_vuetify)
[](https://www.python.org/)
[](https://nodejs.org)
[](https://www.npmjs.com/)
[](https://ja.vuejs.org/)
[](https://vuetifyjs.com/ja/)
Vuetify 勉強用リポジトリ
- [バックエンド開発ガイドライン](./backend/README.md)
- [フロントエンド開発ガイドライン](./frontend/README.md)
## 前提
- インストール（ホスト上に）
- [Windows Subsystem for Linux](https://learn.microsoft.com/ja-jp/windows/wsl/)
- [Git](https://git-scm.com/)
- [Docker Desktop](https://www.docker.com/ja-jp/products/docker-desktop/)
- [Visual Studio Code](https://code.visualstudio.com/)
- インストール（Windows Subsystem for Linux 上に）
- [AWS SAM CLI](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/install-sam-cli.html)
- [Python](https://www.python.org/)
## はじめにやること
1. Windows Subsystem for Linux 上でプログラムダウンロード
```bash
git clone 'https://github.com/q23isline/study_vuetify.git'
```
2. リポジトリのカレントディレクトリへ移動
```bash
cd study_vuetify
```
3. 開発準備
```bash
cp .vscode/settings.json.default .vscode/settings.json
cp .vscode/launch.json.default .vscode/launch.json
```
4. アプリ立ち上げ
```bash
docker compose build
docker compose up -d
# ライブラリインストール
docker compose exec frontend npm install
docker build -t study_vuetify-backend -f docker/local/python/Dockerfile backend
docker run -it --rm -v $(pwd)/backend:/backend study_vuetify-backend uv sync
# エディタがライブラリを実行できるように実行権限を含めた全権限を与える
sudo chmod -R 777 frontend/node_modules backend/.venv
cd backend
sam build --use-container
sam local start-api -p 3010 --debug > logs/debug.log 2>&1 --docker-network study_vuetify_default
```
## 日常的にやること
### バックエンドのビルド
```bash
cd backend
sam build --use-container
```
### システム起動
```bash
# リポジトリのカレントディレクトリ
pwd
# /xxx/xxx/study_vuetify
# コンテナ起動
docker compose up -d
# フロントエンド起動
docker compose exec frontend npm run dev -- --host
# バックエンド起動
cd backend
sam local start-api -p 3010 --debug > logs/debug.log 2>&1 --docker-network study_vuetify_default
```
### システム終了
```bash
# バックエンド起動ターミナルで Ctrl + c
# フロントエンド起動ターミナルで Ctrl + c
docker compose down
```
## 動作確認
### URL
- バックエンド
-
- フロントエンド
-
## Dockerfile コード静的解析実行
```bash
docker run --rm -i hadolint/hadolint < $(pwd)/docker/local/node/Dockerfile
docker run --rm -i hadolint/hadolint < $(pwd)/docker/local/python/Dockerfile
```
## ログ出力場所
| サービス | ログ出力場所 |
| -------- | ------------- |
| Node.js | logs/frontend |
| Python | backend/logs |
## Permission Deniedエラーや VSCode でライブラリが読み込めないエラーが出た時の解決方法
```bash
# プロジェクト全体のファイルすべてに読み込み、書き込み権限を与える
sudo chmod -R ogu+rw ./
# インストールしたライブラリに実行権限を含めた全権限を与える
sudo chmod -R 777 frontend/node_modules backend/.venv
```