Change default port for Vue.js app on Docker

Question

I'm trying to change de default port for a Vue.js app on docker.

I used both examples in this official documentation: https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html

Dockerfile with http-server:

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

EXPOSE 8080
CMD [ "http-server", "dist" ]

Dockerfile with nginx server:

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

And this is my docker-compose file:

version: "3.7"
services:
    admclient: 
        build: ../food-order-frontend-admin
        image: myapp/myapp:v1.0
        container_name: myapp
        ports:
            - "6969:whateverIExposeInDockerFile"

Both examples work, but only when their default port is being used, 8080 and 80. When using a non-default port, I get following error in browser:

crbug/1173575, non-JS module files deprecated

And nothing useful in the console. Except when docker-logging the app when it's on httpServer:

Starting up http-server, serving dist
Available on:
  http://127.0.0.1:8080
  http://172.19.0.2:8080

Apparently "Expose whateverPort" in Dockerfiles doesn't go through. P.S: I don't need a production-ready solution. So I would go for the fastest fix.

user_11796976 · Answer

I found a working solution using nginx in https://github.com/adhavpavan/ContainerizingApps/tree/master/vue .

Dockerfile:

FROM node:lts-alpine as builder
WORKDIR /usr/src/app
COPY . ./
RUN npm install
RUN npm run build
FROM nginx:alpine
COPY --from=builder /usr/src/app/dist /var/www
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 3001
ENTRYPOINT ["nginx","-g","daemon off;"]

docker-compose:

version: "3.7"
services:
    myapp: 
        build: ../myapp
        image: test/myapp:v1.0
        container_name: myapp
        ports:
            - "6970:3001"

The answer seems to lie in what David Maze suggested in the comments. A proper way for telling the server to listen to a specific port is required.

nginx.conf:

worker_processes auto;
events {
    worker_connections 8000;
    multi_accept on;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    log_format compression '$remote_addr - $remote_user [$time_local] '
         '"$request" $status $upstream_addr '
         '"$http_referer" "$http_user_agent"';
    server {
        listen 3001;
        access_log /var/log/nginx/access.log compression;
        root /var/www;
        index index.html index.htm;
        location / {
            if (!-e $request_filename) {
                rewrite ^(.*)$ /index.html break;
            }
        }
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
            expires 1M;
            access_log off;
            add_header 'Cache-Control' 'public';
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
        }
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }
    }
}

I'm still unsure how to do this with http-server, but this solution is enough for what I need.

Change default port for Vue.js app on Docker

1 Answers