How to deploy a Sveltekit App using a Dockerfile? - docker

I'm trying to deploy my Sveltekit App in Railway
Whenever I try to run
docker run --publish 8000:8000 my_project
I get back
> my-project#0.0.1 build
> vite build
sh: vite: not found
This is my dockerfile
# syntax=docker/dockerfile:1
FROM node:19.4.0-alpine3.16
ENV NODE_ENV=production
WORKDIR /app
COPY ["package.json", "package-lock.json*", "./"]
RUN npm install
RUN npm install dotenv
RUN npm install #directus/sdk
RUN npm install vite
COPY . .
CMD [ "npm", "run", "build" ]
This is my package.json file
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"test": "playwright test",
"test:unit": "vitest",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"dependencies": {
"#directus/sdk": "^10.3.1",
"dotenv": "^16.0.3"
}
}
Script and dependencies above
The devDependencies are the following, at least the ones I found competent
"devDependencies": {
"#sveltejs/adapter-auto": "^1.0.0",
"#sveltejs/kit": "^1.0.0",
"svelte": "^3.54.0",
"svelte-check": "^2.9.2",
"vite": "^4.0.0",
"vitest": "^0.25.3"
},

Related

Local env with Docker for nuxtjs

I'm trying to create a local env with docker for a nuxtjs project.
This is my docker-compose.yml:
version: '3.3'
services:
frontend:
container_name: frontend
restart: unless-stopped
working_dir: /app
build:
dockerfile: Dockerfile
volumes:
- ./application:/app
ports:
- "3001:3000"
environment:
HOST: 0.0.0.0
command: npm run dev
This is my Dockerfile
FROM alpine:3.15
RUN apk update
RUN apk add --no-cache --update make
RUN apk add --no-cache --update python3 py3-pip
RUN apk add --no-cache --update nodejs npm
RUN apk add --no-cache --update g++
WORKDIR /app
COPY application /app
RUN npm install -g nuxt
RUN NODE_ENV=development npm install
RUN npm install
ENV HOST 0.0.0.0
EXPOSE 3001
When I run docker-compose up --build
✖ Nuxt Fatal Error Error: Cannot find module '#nuxtjs/eslint-module'
Require stack:
/usr/local/lib/node_modules/nuxt/node_modules/#nuxt/core/dist/core.js
This is my package.json
{
"name": "demo",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "npm run lint:js",
"lintfix": "npm run lint:js -- --fix",
"lintreport": "npm run lint:js -- -f node_modules/eslint-html-reporter/reporter.js -o eslint-report.html",
"test": "jest"
},
"dependencies": {
"#nuxtjs/auth-next": "5.0.0-1637745161.ea53f98",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/sitemap": "^2.4.0",
"axios": "^0.24.0",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"devDependencies": {
"#babel/eslint-parser": "^7.16.3",
"#nuxt/test-utils": "^0.2.2",
"#nuxtjs/eslint-config": "^8.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/google-fonts": "^1.3.0",
"#nuxtjs/tailwindcss": "^4.2.1",
"#vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.4.4",
"eslint": "^8.4.1",
"eslint-html-reporter": "^0.7.4",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-vue": "^8.2.0",
"express": "^4.17.2",
"jest": "^27.4.5",
"postcss": "^8.4.4",
"supertest": "^6.1.6",
"vue-jest": "^3.0.4"
}
}
Looks like that the devDependencies are not installed.
Any idea how to run the prject?
You can use this hack to avoid mounting your node_modules and overriding the ones in the container.
volumes:
- ./application:/app
- /app/node_modules
ref: Docker-compose: node_modules not present in a volume after npm install succeeds

How to rebuild create-react-app from a dockerfile container by passing env_file in docker-compose.yaml

I will try to be as descriptive as I can but I have an react app built with creat-react-app from this app I build a docker image.
dockerfile
FROM node:17-alpine
# set working directory
WORKDIR /app
# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./
RUN apk add --no-cache --virtual .gyp python3 make g++ \
&& yarn install \
&& apk del .gyp
# Copies everything over to Docker environment
COPY . ./
RUN yarn build-docker
#install serve package
RUN yarn global add serve
EXPOSE 3000 5000
ENTRYPOINT ["serve", "-s", "build"]
Which works fine locally with the .env file included in the project. For our production and development we use docker-compose and include the env_file in our docker-compose.yaml
docker-compse.yaml sample
app:
container_name: app
image: {image_source}
restart: always
env_file:
- env/app.env
api:
container_name: api
image: {image_source}
restart: always
env_file:
- env/global.env
- env/db.env
The api works fine since it's using ENTRYPOINT ["npm", "start"] and reload the .env file every time it start, but since the app is built before the docker-compose up -d,
Is their a way to rebuild using yarn build-docker with docker-compose so my new build get the right .env file?
I finally found out how to solve the issue.
Instead of building the app within the container I chained both action in package.json and simply run the build before the serve.
package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build-docker": "react-scripts --openssl-legacy-provider build",
"build-start": "react-scripts --openssl-legacy-provider build && serve -s build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"build-start": "react-scripts --openssl-legacy-provider build && serve -s build"
And in dockerfile i removed the yarn build-docker and changed the entrypoint to ENTRYPOINT ["npm", "run", "build-start"]
dockerfile
FROM node:17-alpine
# set working directory
WORKDIR /app
# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./
RUN apk add --no-cache --virtual .gyp python3 make g++ \
&& yarn install \
&& apk del .gyp
# Copies everything over to Docker environment
COPY . ./
##### REMOVED THE FIRST BUILD
#RUN yarn build-docker
#install serve package
RUN yarn global add serve
EXPOSE 3000 5000
##### CHANGED THE ENTRYPOINT WITH THE NEW SCRIPT
ENTRYPOINT ["npm", "run", "build-start"]
So everytime it goes up with docker-compose the .env is used during the build.
Hope this could help someone!

run npm start as ENTRYPOINT from the Dockerfile

I am trying to build a dockerfile in which i am just starting a http-server.
My dockerfile is:
FROM ubuntu
RUN apt-get update
RUN apt-get install -y nodejs && apt-get install -y npm
COPY testing /testing
RUN cd testing
RUN npm install
ENTRYPOINT npm start
Here testing is the project directory which consist of an index.html file and package.json.
My package.json is:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "http-server -a 0.0.0.0 -p 5500"
},
"author": "",
"license": "ISC",
"dependencies": {
"concurrently": "^5.0.2",
"http-server": "^0.12.1"
}
}
In my local machine the server is working properly. I think the cd testing command isn't appropriate and npm install is not taking the package.json file.
The docker image is formed under the Image ID - 6260786586cc
and the error while running an image through command is:
Use WORKDIR instruction instead of cd.
WORKDIR testing
Each instruction in Dockerfile is executed in a separate container during build. So running cd to change directory during build doesn't work.

Gulp installing wrong version. Need 3.9.1 but keeps installing 4.0.2

Despite trying everything I know how to do and doing a ton of searching I cannot figure out what is wrong. I am trying to launch an older project in docker. The package.json file is set to install gulp#3.9.1 but when the Dockerbuild runs and installs the packages it installs 4.0.2 every time.
How can I get my docker image to install the correct version of gulp?
Dockerfile
WORKDIR /var/www
#Install Node and NPM
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash -
RUN apt update
RUN apt install -y nodejs lsof
#Install NPM deps
COPY ./package-lock.json /var/www/package-lock.json
COPY ./package.json /var/www/package.json
RUN npm install --quiet >> /dev/null \
&& npm link gulp \
&& gulp -v
package.json
"devDependencies": {
"gulp": "^3.9.1",
}
package-lock.json
"gulp": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.1.tgz",
"integrity": "sha1-VxzkWSjdQK9lFPxAEYZgFsE4RbQ=",
"dev": true,
"requires": {
"archy": "^1.0.0",
"chalk": "^1.0.0",
"deprecated": "^0.0.1",
"gulp-util": "^3.0.0",
"interpret": "^1.0.0",
"liftoff": "^2.1.0",
"minimist": "^1.1.0",
"orchestrator": "^0.3.0",
"pretty-hrtime": "^1.0.0",
"semver": "^4.1.0",
"tildify": "^1.0.0",
"v8flags": "^2.0.2",
"vinyl-fs": "^0.3.0"
},
"dependencies": {
"semver": {
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
"integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
"dev": true
}
}
},
Docker Build output
Step 12/20 : RUN npm install --quiet >> /dev/null && npm link gulp && gulp -v
---> Running in 8dc99b37ab8a
/usr/bin/gulp -> /usr/lib/node_modules/gulp/bin/gulp.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.9 (node_modules/gulp/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ gulp#4.0.2
added 314 packages from 217 contributors in 16.348s
/var/www/node_modules/gulp -> /usr/lib/node_modules/gulp
CLI version: 2.2.0
Local version: 4.0.2

npm install is taking (30+) minute

npm install is taking (30+) minutes in server which runs on debian 9.8.
I want to know what might cause this?
I've already tried npm set progress=false and npm config set registry http://registry.npmjs.org/ but none of it helped.
I'm running it in docker container.
this is my package.json
{
"name": "name",
"version": "1.0.0",
"main": "server/server.js",
"engines": {
"node": ">=6"
},
"scripts": {
"lint": "eslint .",
"start": "nodemon .",
"client": "cd client && npm start",
"test": "mocha"
},
"dependencies": {
"babel-eslint": "^10.0.1",
"compression": "^1.0.3",
"cors": "^2.5.2",
"eslint-config-react-app": "^4.0.0",
"eslint-plugin-flowtype": "^3.7.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"eslint-plugin-react-hooks": "^1.6.0",
"express-jwt": "^5.3.1",
"express-winston": "^3.2.0",
"helmet": "^3.10.0",
"html-element": "^2.3.0",
"jwks-rsa": "^1.5.1",
"libxmljs": "^0.19.5",
"loopback": "^3.22.0",
"loopback-boot": "^2.6.5",
"loopback-component-explorer": "^6.2.0",
"loopback-connector-mongodb": "^4.2.0",
"loopback-connector-rest": "^3.4.1",
"node": "8.16.0",
"node-blockly": "^1.0.36",
"serve-favicon": "^2.0.1",
"strong-error-handler": "^3.0.0",
"winston": "^3.2.1"
},
"devDependencies": {
"chai": "^4.2.0",
"eslint": "^3.17.1",
"eslint-config-loopback": "^8.0.0",
"loopback-supertest-models": "^3.5.0",
"mocha": "^6.1.4",
"nodemon": "^1.19.0",
"supertest": "^4.0.2"
},
"repository": {
"type": "",
"url": ""
},
"license": "UNLICENSED",
"description": "description"
}
and this is my Dockerfile
FROM node:10.9.0-alpine as builder
RUN mkdir -p /app/server
WORKDIR /app/server
COPY package*.json /app/server/
#COPY yarn* /app/server/
# Disables npm progress bar
RUN npm set progress=false
# Set npm registry to http://registry.npmjs.org
RUN npm config set registry http://registry.npmjs.org/
#! Install the build requirements for bcrypt
RUN apk update && apk upgrade \
&& apk --no-cache add --virtual git builds-deps build-base \
&& apk --no-cache add make gcc g++ python \
&& npm install --save node-gyp node-pre-gyp \
&& rm -rf /var/cache/apk/*
# && yarn add node-gyp node-pre-gyp
# Install dependencies
# RUN yarn install --production=true
RUN npm install --production
# Copy the server files over
COPY . /app/server/
RUN apk del make gcc g++ python
FROM node:10.9.0-alpine
# Create and set the working directory
RUN mkdir -p /app/server
WORKDIR /app/server
# Copy the server from the build container
COPY --from=builder /app/server /app/server
CMD ["node", "."]

Resources