vue.js project build in Docker corrupts base64 image - vue.js

I have a weird issue that base64 images are corrupted after I deploy to my server with Gitlab CI
I started my boilerplate from this recent updated Github:
https://github.com/Jamie-Yang/vue3-boilerplate
A local yarn dev works
Then I made the Dockerfile:
FROM node:16 as build-stage
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY /. .
RUN yarn build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
The image does build fine and running on Windows Docker Desktop without a problem
Next I started with the Gitlab deploy:
image: docker
services:
- docker:dind
stages:
- deploy
step-deploy-prod:
cache: []
stage: deploy
script:
- docker build -t app/myapp .
- docker stop myapp || true && docker rm myapp || true
- docker run -d --restart always -p 11580:80 --name myapp app/myapp
The app is deployed but somehow base64 image is corrupt
I wanted to be sure that it wasn't the nginx proxy reverse, but visiting mysite.com:11580 gives the same result.
When I transfer the dist folder via FTP to a public_html folder (so no docker) that works.
So maybe some cashing is going on in the Gitlab runner?
When I inspect the working webpage in public_html, my base64 src is
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAA...
and on the non working docker environment
data:image/png;base64,iVBORwoaCgAAAA1JSERSAAAAyAAAAM...
So what can be happening here?
[UPDATE]
When I replace the logo with a perfect image it renders corrupt.

Related

Metro Bundler not starting in Docker with React Native / Expo

I am trying to develop a Expo / React Native from a docker container;
So far i have the following Dockerfile and docker-compose.yml in the root directory of my Expo app .. Whenever i run docker-compose up -d, it brings the container up but trying to hit the endpoint localhost:9000 it just shows me json data about the expo project (which looks like a bigger version of the app.json) instead of the metro bundler webpage.
Dockerfile
FROM node:latest
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json /usr/src/app/
COPY app.json /usr/src/app/
RUN npm install -g expo-cli
EXPOSE 19000
EXPOSE 19001
EXPOSE 19002
CMD npm i -f && npm start
docker-compose.yml
version: '3.7'
services:
expo:
container_name: expo-app
build: ./
ports:
- 19000:19000
- 19001:19001
- 19002:19002
volumes:
- ./:/usr/src/app
- /usr/src/app/node_modules
environment:
- EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0
- REACT_NATIVE_PACKAGER_HOSTNAME=<<my_local_ip_address>>

I have Written the dockerfile for run Vue.js application using Yarn module dependency but run on machine

I have write the dockerfile run the Vue.js application with Yarn module but it fails .not get success last 2 day .
really appreciative for help .
Here is my dockerFile
FROM node:lts-alpine
# install simple http server for serving static content
RUN yarn global add http-server
# make the 'app' folder the current working directory
RUN mkdir -p /app
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
COPY yarn.lock ./
# install project dependencies
RUN yarn install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
### Lints and fixes files
RUN yarn run lint
# build app for production with minification
RUN yarn run build
EXPOSE 8080
CMD [ "http-server", "dist" ]
After I get the logs
Starting up http-server, serving dist
Available on:
http://127.0.0.1:8080
http://172.30.150.240:8080
Hit CTRL-C to stop the server

Deploy Vue.js application to gitlab pages even though deployment is successful nothing is displayed

I am trying to deploy a sample Vue.js application to Gitlab pages but even though deployment has passed successfully nothing is rendered when I try to hit the served URL.
Here is my deployment code(.gitlab-ci.yml):
pages:
image: node:latest
stage: deploy
script:
- npm install --progress=false
- npm run build
- mkdir .public
- cp -r dist/* .public
- mv .public public
artifacts:
expire_in: 1 week
paths:
- public
only:
- master
I tried to locally serve the pages after npm run build from the /dist folder and its working all fine. I am not sure if there are any issues in my deployment script in Gitlab.
How do I get my application running in Gitlab pages?
I am using vuejs2and vue-cli-3 for bundling the scripts.
I figured out the issue with my code. The public folder contained duplicate data due to which it was not rendering the application properly.
Here is the working version of the deployment script:
pages:
image: node:latest
stage: deploy
script:
- npm install --progress=false
- npm run build
- rm -rf public
- mkdir public
- cp -r dist/* public
artifacts:
expire_in: 1 week
paths:
- public
only:
- master
After pipeline process is completed access the Gitlab pages of your repository. You should see the app rendering as expected.

Vue.js application does not run on Gitlab pages

I built a Vue.js Vuex user interface. It works perfectly (on my laptop). I want to deploy it on Gitlab pages.
I used the file described here (except that I upgraded the Node.js version):
build site:
image: node:10.8
stage: build
script:
- npm install --progress=false
- npm run build
artifacts:
expire_in: 1 week
paths:
- dist
unit test:
image: node:10.8
stage: test
script:
- npm install --progress=false
- npm run unit
deploy:
image: alpine
stage: deploy
script:
- apk add --no-cache rsync openssh
- mkdir -p ~/.ssh
- echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
- chmod 600 ~/.ssh/id_dsa
- echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
- rsync -rav --delete dist/ user#server.com:/your/project/path/
The job is marked as run successfully on the pipeline. However when I click on the pages URL I get a 404 HTTP error code.
What am I missing?
I was facing a similar issue when I was trying to deploy my Vue.js application to Gitlab pages. After weeks of trial and error, I have got it to work.
Seeing your above script your building the app, unit testing it and trying to deploy it to an external server. If you need it in Gitlab pages as well you have to use the pages job.
Here is my pages job for deploying a vue.js app to Gitlab pages:
pages:
image: node:latest
stage: deploy
script:
- npm install --progress=false
- npm run build
- rm -rf public
- mkdir public
- cp -r dist/* public
artifacts:
expire_in: 1 week
paths:
- public
only:
- master
Hope this is what you're looking for.
You can deploy without the pipeline. In order for this to work you have to first build your application for production. If you have used Vue cli this is done by invoking the build command. ex. npm run build
This will generate a dist folder where your assets are. This is what you have to push in your repository. For example, look at my repository.
https://github.com/DanijelH/danijelh.github.io
And this is the page
https://danijelh.github.io/

Can't get drone.io CI to share files between pipelin steps

here is my .drone.yml:
pipeline:
test:
image: node:10
commands:
- npm install --production
- npm run build --production
publish:
image: plugins/docker
repo: myhub/image_name
when:
event: push
branch: master
the command npm run build creates a folder named build with static files inside. However, the publish step fails when building the docker image. Here is my Dockerfile:
FROM node:10-alpine
RUN mkdir -p /app
WORKDIR /app
COPY build build
The error being: COPY failed: stat /var/lib/docker/tmp/docker-builder090186817/build: no such file or directory time="2018-05-28T21:19:25Z" level=fatal msg="exit status 1"
So I don't quite understand how to build some files in one step, and copy them in the docker publish step...
Thanks for your help!
So anything in the workspace will get shared to the next step ;)
Are you able to build the docker image without drone with just docker build .?
ie. You might want to try to change COPY build build to be COPY ./build /app/build or the something like it.