Start the Nuxt.js project using docker-compose

I'm currently facing some challenges while trying to deploy my nuxt project using Docker. I have created a Dockerfile, docker-compose.yml, and also the .dockerignore file. However, I am encountering errors during the process. This is my first time working with Docker and although I have followed the guidelines from the official documentation, I do not have a strong understanding of Docker. If there are any steps that I may have missed or if anyone can help me understand the reason for the error while building docker-compose, please let me know.

Dockerfile

 FROM node:14.15.4-alpine

#create destination directory
RUN mkdir -p /twin_login/app
WORKDIR /app

COPY package*.json ./app

#update and install dependency
RUN apk update && apk upgrade
RUN apk add git
RUN apk add python3

#copy the app, note .dockerignore
COPY . .
COPY . /app
RUN npm install

#build necessary, even if no static files are needed,
RUN node -v
RUN npm -v

#set app serving to permissive / assigned
ENV HOST 0.0.0.0

#expose 8000 on container
EXPOSE 8000

CMD ["npm", "start"]

Docker-compose.yml

    version: '3'
services:
  web:
    build: .
    ports:
      - 8000:3000
    volumes:
      - ./twin_login:/app
    stdin_open: true
    tty: true
    networks:
      - twin_login

networks:
  twin_login:
    external: true

.dockerignore

node_modules
.gitignore
.nuxt

Error this is the error i am getting

WARN[0000] Found orphan containers ([twin_management_screen_nuxt_1 twin_management_screen_nuxt_run_2d8fca86d2ca twin_management_screen_nuxt_run_6d5ee3c9b0ba twin_management_screen_nuxt_run_881e46ae1ad1 twin_management_screen_nuxt_run_5089871620b5]) for this project. If you removed or renamed this service in your compose file, you can run this command with the --remove-orphans flag to clean it up.

Answer №1

The issue identified is actually a warning (specifically WARN[0000]) indicating orphaned containers that should be cleaned up using --remove-orphans to free up space on the system.

Verify the syntax of your yml file and also double-check the Dockerfile for correct indentation.

It may seem like the "run" section of your start CMD is missing.

A helpful tip is to keep the Dockerfile minimal and delegate most tasks to docker-compose. Here's the essential content required in your Dockerfile:

FROM node:xxx.xxx
ENV NODE_ENV=dev
WORKDIR /
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 8080 #or another port
CMD ["npm", "run", "start"]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling elements conditionally with AngularJS-controlled CSS

Looking for some guidance in Angular as a newcomer. I am attempting to adjust a style when clicked. On my page, I have multiple content spaces created using the same template. Upon clicking a "more" link, I desire to expand that specific section. I have ac ...

Retrieve the parent jQuery object of the element that was clicked using jQuery

Within my HTML code, I have numerous instances of elements similar to the following: <div class="class"> <div class="disconnect_btn">Click here</div> <input type="hidden" name="ID" value="12"/> </div> I've set up a ...

Ngrx/effects will be triggered once all actions have been completed

I've implemented an effect that performs actions by iterating through an array: @Effect() changeId$ = this.actions$.pipe( ofType(ActionTypes.ChangeId), withLatestFrom(this.store.select(fromReducers.getAliasesNames)), switchMap(([action, aliases ...

Preventing Angular $rootElement.on('click') from affecting ReactJS anchor tag interactions

Running both AngularJS and ReactJS on the same page has caused an issue for me. Whenever I click on a ReactJS <a> tag, Angular's $rootElement.on('click) event is triggered and the page redirects. I need to perform some functionality in Re ...

What could be the issue with my injection supplier?

When running the following code, the configuration works fine, but an error is returned: Uncaught Error: [$injector:unpr] Unknown provider: AngularyticsConsoleHandlerProvider <- AngularyticsConsoleHandler <- Angularytics Code snippet: angular.modu ...

The integration of Tinymce and Vuetify dialog is causing issues where users are unable to input text in the source code editor or add code samples

Having an issue with the Vuetify dialog and TinyMCE editor. Upon opening the dialog with the editor inside, certain functionalities like Edit source code or Insert code sample are not working as intended. Specifically, when attempting to use one of these p ...

The action of POSTing to the api/signup endpoint is

Currently delving into the MEAN stack, I have successfully created a signup api. However, when testing it using POSTMAN, I encountered an unexpected error stating that it cannot POST to api/signup. Here is a snapshot of the error: Error Screenshot This ...

Error in Javascript: Null Object

I have created an upload page with a PHP script for AJAX, but I'm encountering errors in Firebug. Also, the upload percentage is not being returned properly. Currently, I can only do one upload in Firefox and the script doesn't work in Chrome. H ...

What is the best way to organize a table with multiple state variables using nested loops?

What is the best way to display multiple variables in a table using a loop, such as i,j,k? this.state = { materials: ['m1', 'm2'], quantity: ['2', '4'], unitPrice : ['12&apo ...

The promise is returning an undefined value when attempting to access the array within

I'm currently delving into NodeJS to create some automation scripts, but I've hit a roadblock that's stumping me. By utilizing the Google Spreadsheet API and the "promisify-node" package, I'm trying to fetch data from a spreadsheet and ...

The error message "currencyDisplay 'narrowSymbol' is not within a valid range" was encountered

Encountering an issue in IE 20H2 [Vue warn]: Error in render: "RangeError: Option value 'narrowSymbol' for 'currencyDisplay' is outside of valid range. Expected: ['code', 'symbol', 'name']" Unc ...

Trouble with React Material-UI Select component onChange event

I encountered an issue while using Material-UI select where I am unable to access the selected value due to a warning message: index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside S ...

Using Google Apps Script to invoke a JavaScript function from an HTML file

In my Apps script project, I am working on creating a Google chart that will appear in a modal above Google Sheets. I have ChartC.html: <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> ...

Determine if a value is able to be converted into JSON format using Node.js

I have the following piece of code: function evaluate(expression, context, callback) { try { var evaluated = safeEval(expression, context); callback(JSON.stringify({data: evaluated})); } catch(err) { callback(JSON.stringify ...

Gather data from all input sources and compile it into a well-organized

I'm looking to convert HTML form inputs into JSON format. Initially, I attempted to achieve this using jQuery's serializeArray method, which worked fine for simple input names. However, when dealing with multidimensional input names like: <i ...

Count up with HTML like a progressive jackpot's increasing value

I am interested in developing a progressive jackpot feature similar to the sample image provided. I would like the numbers to loop periodically. Can anyone advise me on how to achieve this effect? Any suggestions or examples, preferably using JavaScript o ...

Can Hapi-Joi validate a payload consisting of either an Array of objects or a plain Javascript object?

How can I create a schema to validate payloads for a post call that accepts either a single JS object or an array of objects to be saved in the database? JS object { label: 'label', key: 'key', help_text: 'text' } ...

JavaScript does not effectively validate emails when integrated with HTML

My goal is to enable users to check if their email address meets the RFC standard by comparing it with the regular expression provided below. I have tested a few examples in the console using a validation function. While I am aware that my regex may not c ...

Tips for accessing the information received from an AJAX call

When making an AJAX post request for processed data from the database in the form of an array [value1, value2, value3,...,valueN], I aim to use it on a ChartJS object. Here is the AJAX Request: $(document).ready($.post('callMeForAJAX.jsp', func ...

INSERT INTO only if Name and Location are NOT identical

I'm facing an issue with adding a record to my psql table only if it has a unique Name and Location. Currently, the code I have is able to insert a record if the entry doesn't already exist in the table (based on name or location). However, when ...