Dockerfile
This commit is contained in:
root
+24
-37
@@ -1,12 +1,6 @@
|
||||
# Dependencies
|
||||
node_modules
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Build outputs
|
||||
dist
|
||||
build
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
@@ -15,56 +9,49 @@ build
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# IDE files
|
||||
# Build outputs
|
||||
dist
|
||||
.output
|
||||
.nuxt
|
||||
.nitro
|
||||
|
||||
# IDE and editor files
|
||||
.vscode
|
||||
.idea
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS files
|
||||
# OS generated files
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Git
|
||||
.git
|
||||
.gitignore
|
||||
|
||||
# Docker
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
|
||||
# Documentation
|
||||
README.md
|
||||
CHANGELOG.md
|
||||
LICENSE.md
|
||||
docs/
|
||||
|
||||
# Docker files
|
||||
Dockerfile*
|
||||
docker-compose*.yml
|
||||
.dockerignore
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
logs
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
# Coverage
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Dependency directories
|
||||
jspm_packages/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
# Cache
|
||||
.cache
|
||||
.eslintcache
|
||||
+154
@@ -0,0 +1,154 @@
|
||||
# Docker Environment Variables Guide
|
||||
|
||||
This guide explains how to use environment variables with Docker builds for your Vue.js application.
|
||||
|
||||
## Problem
|
||||
|
||||
The original Dockerfile didn't handle environment variables from `.env` files because:
|
||||
|
||||
1. Vite requires environment variables to be available at build time
|
||||
2. Docker builds don't automatically read `.env` files
|
||||
3. Environment variables need to be passed as build arguments
|
||||
|
||||
## Solution
|
||||
|
||||
The updated Dockerfile now accepts build-time environment variables using `ARG` and `ENV` instructions.
|
||||
|
||||
## How to Use
|
||||
|
||||
### 1. Create a `.env` file
|
||||
|
||||
Create a `.env` file in your project root with your environment variables:
|
||||
|
||||
```bash
|
||||
# .env
|
||||
VITE_API_BASE_URL=https://api.yourdomain.com
|
||||
VITE_API_TIMEOUT=10000
|
||||
VITE_APP_TITLE=My App
|
||||
VITE_APP_VERSION=1.0.0
|
||||
VITE_AUTH_TOKEN_KEY=auth_token
|
||||
VITE_REFRESH_TOKEN_KEY=refresh_token
|
||||
VITE_ENABLE_ANALYTICS=true
|
||||
VITE_ENABLE_DEBUG=false
|
||||
VITE_GOOGLE_ANALYTICS_ID=GA-XXXXXXXXX
|
||||
VITE_SENTRY_DSN=https://your-sentry-dsn
|
||||
```
|
||||
|
||||
### 2. Build with Environment Variables
|
||||
|
||||
#### Option A: Using docker build with --build-arg
|
||||
|
||||
```bash
|
||||
docker build \
|
||||
--build-arg VITE_API_BASE_URL=https://api.yourdomain.com \
|
||||
--build-arg VITE_APP_TITLE="My App" \
|
||||
--build-arg VITE_ENABLE_DEBUG=false \
|
||||
-t sakai-vue .
|
||||
```
|
||||
|
||||
#### Option B: Using docker-compose with env_file
|
||||
|
||||
Create a `docker-compose.yml`:
|
||||
|
||||
```yaml
|
||||
version: '3.8'
|
||||
services:
|
||||
sakai-vue:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
args:
|
||||
VITE_API_BASE_URL: ${VITE_API_BASE_URL}
|
||||
VITE_APP_TITLE: ${VITE_APP_TITLE}
|
||||
VITE_ENABLE_DEBUG: ${VITE_ENABLE_DEBUG}
|
||||
ports:
|
||||
- '80:80'
|
||||
```
|
||||
|
||||
Then run:
|
||||
|
||||
```bash
|
||||
docker-compose up --build
|
||||
```
|
||||
|
||||
#### Option C: Using a script to read .env file
|
||||
|
||||
Create a `build.sh` script:
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# build.sh
|
||||
|
||||
# Load environment variables from .env file
|
||||
if [ -f .env ]; then
|
||||
export $(cat .env | grep -v '^#' | xargs)
|
||||
fi
|
||||
|
||||
# Build Docker image with environment variables
|
||||
docker build \
|
||||
--build-arg VITE_API_BASE_URL="$VITE_API_BASE_URL" \
|
||||
--build-arg VITE_API_TIMEOUT="$VITE_API_TIMEOUT" \
|
||||
--build-arg VITE_APP_TITLE="$VITE_APP_TITLE" \
|
||||
--build-arg VITE_APP_VERSION="$VITE_APP_VERSION" \
|
||||
--build-arg VITE_AUTH_TOKEN_KEY="$VITE_AUTH_TOKEN_KEY" \
|
||||
--build-arg VITE_REFRESH_TOKEN_KEY="$VITE_REFRESH_TOKEN_KEY" \
|
||||
--build-arg VITE_ENABLE_ANALYTICS="$VITE_ENABLE_ANALYTICS" \
|
||||
--build-arg VITE_ENABLE_DEBUG="$VITE_ENABLE_DEBUG" \
|
||||
--build-arg VITE_GOOGLE_ANALYTICS_ID="$VITE_GOOGLE_ANALYTICS_ID" \
|
||||
--build-arg VITE_SENTRY_DSN="$VITE_SENTRY_DSN" \
|
||||
-t sakai-vue .
|
||||
```
|
||||
|
||||
Make it executable and run:
|
||||
|
||||
```bash
|
||||
chmod +x build.sh
|
||||
./build.sh
|
||||
```
|
||||
|
||||
## Available Environment Variables
|
||||
|
||||
The following environment variables are supported in the Dockerfile:
|
||||
|
||||
- `VITE_API_BASE_URL` - Base URL for your API
|
||||
- `VITE_API_TIMEOUT` - API request timeout in milliseconds
|
||||
- `VITE_APP_TITLE` - Application title
|
||||
- `VITE_APP_VERSION` - Application version
|
||||
- `VITE_AUTH_TOKEN_KEY` - Key for storing auth token
|
||||
- `VITE_REFRESH_TOKEN_KEY` - Key for storing refresh token
|
||||
- `VITE_ENABLE_ANALYTICS` - Enable/disable analytics
|
||||
- `VITE_ENABLE_DEBUG` - Enable/disable debug mode
|
||||
- `VITE_GOOGLE_ANALYTICS_ID` - Google Analytics tracking ID
|
||||
- `VITE_SENTRY_DSN` - Sentry DSN for error tracking
|
||||
|
||||
## Security Notes
|
||||
|
||||
1. **Never commit `.env` files** - They're already in `.gitignore`
|
||||
2. **Use `.dockerignore`** - Prevents `.env` files from being copied to the build context
|
||||
3. **Use build secrets** for sensitive data in production:
|
||||
```bash
|
||||
docker build --secret id=env,src=.env -t sakai-vue .
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Environment variables not working?
|
||||
|
||||
1. Make sure your `.env` file exists and has the correct variable names
|
||||
2. Verify the variables are prefixed with `VITE_`
|
||||
3. Check that you're passing them as build arguments
|
||||
4. Ensure the variables are available at build time (not runtime)
|
||||
|
||||
### Build fails?
|
||||
|
||||
1. Check that all required environment variables are provided
|
||||
2. Verify the variable names match exactly (case-sensitive)
|
||||
3. Make sure there are no syntax errors in your `.env` file
|
||||
|
||||
## Development vs Production
|
||||
|
||||
- **Development**: Use `.env.local` or `.env.development`
|
||||
- **Production**: Use `.env.production` or pass variables directly via build args
|
||||
- **Testing**: Use `.env.test`
|
||||
|
||||
The Dockerfile will work with any of these approaches as long as the variables are passed as build arguments.
|
||||
+24
@@ -13,6 +13,30 @@ RUN npm ci
|
||||
# Copy source code
|
||||
COPY . .
|
||||
|
||||
# Accept build-time environment variables
|
||||
ARG VITE_API_BASE_URL
|
||||
ARG VITE_API_TIMEOUT
|
||||
ARG VITE_APP_TITLE
|
||||
ARG VITE_APP_VERSION
|
||||
ARG VITE_AUTH_TOKEN_KEY
|
||||
ARG VITE_REFRESH_TOKEN_KEY
|
||||
ARG VITE_ENABLE_ANALYTICS
|
||||
ARG VITE_ENABLE_DEBUG
|
||||
ARG VITE_GOOGLE_ANALYTICS_ID
|
||||
ARG VITE_SENTRY_DSN
|
||||
|
||||
# Set environment variables for the build
|
||||
ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
|
||||
ENV VITE_API_TIMEOUT=$VITE_API_TIMEOUT
|
||||
ENV VITE_APP_TITLE=$VITE_APP_TITLE
|
||||
ENV VITE_APP_VERSION=$VITE_APP_VERSION
|
||||
ENV VITE_AUTH_TOKEN_KEY=$VITE_AUTH_TOKEN_KEY
|
||||
ENV VITE_REFRESH_TOKEN_KEY=$VITE_REFRESH_TOKEN_KEY
|
||||
ENV VITE_ENABLE_ANALYTICS=$VITE_ENABLE_ANALYTICS
|
||||
ENV VITE_ENABLE_DEBUG=$VITE_ENABLE_DEBUG
|
||||
ENV VITE_GOOGLE_ANALYTICS_ID=$VITE_GOOGLE_ANALYTICS_ID
|
||||
ENV VITE_SENTRY_DSN=$VITE_SENTRY_DSN
|
||||
|
||||
# Build the application
|
||||
RUN npm run build
|
||||
|
||||
|
||||
Reference in New Issue
Block a user