What are the steps for containerizing a Vue.js application?

When attempting to access the site locally through on Chrome, I receive an error message stating "172.17.0.2 took too long to respond".

To retrieve the IP address of the container, I used the inspect command.

docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} e83c95d05d63

This is the run command that was utilized.

docker run -it -p 8080:8080 --name portfolio-vue portfolio-vue:v1

Below is my Dockerfile content.

FROM node:7.7-alpine

ADD package.json /tmp/package.json
RUN cd /tmp && npm install

RUN mkdir -p /opt/portfolio-vue && cp -a /tmp/node_modules /opt/portfolio-vue-app

WORKDIR /opt/portfolio-vue
COPY . /opt/portfolio-vue

EXPOSE 8080
CMD ["npm", "start"]
node.jsdockervue.jsvuejs2dockerfile

Answer №1

When working with a standard vue-cli configuration, running npm start (the command you are currently using) actually triggers npm run dev.

By default, the npm run dev command only binds to localhost.

To enable access from outside the docker container, add --host 0.0.0.0 to the webpack-dev-server line in your package.json:

For example:

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

You can modify it like this (add --host 0.0.0.0):

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

Please note: If you are utilizing CMD ["npm", "start"], it is assumed that you are creating a container for development or debugging purposes. For production, it is recommended to generate the bundle (npm run build) and serve the files directly on a HTTP server like nginx (which can also be set up within a docker environment).

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

Encountering Gyp Errors During NPM Install in an Angular 5 Project

I encountered some gyp errors when trying to run "npm install" in my Angular 5 project. I'm not sure why these errors are occurring; perhaps someone here has seen similar issues before. https://i.stack.imgur.com/mMRO4.png I attempted various trouble ...

node.jsangularnpmangular5

What is the process for linking a PostgreSQL database, which is operating on a Docker container, to a Node.js server by utilizing

I would like some assistance with utilizing the pg library to connect nodeJS with the Postgres database. Currently, I am running PostgreSQL & PgAdmin using docker by following this tutorial. To access pgAdmin, I have used http://localhost:82/, and ad ...

node.jspostgresqldockerexpresspg

send email with .jpg image attachment through AWS SES using node.js

Check out the code snippet below from https://github.com/andrewpuch/aws-ses-node-js-examples, which provides an example of sending an email with an attachment. I made some modifications to the code in order to retrieve an image file from AWS S3 and send i ...

node.jsamazon-web-servicesamazon-s3amazon-ses

Tips for incorporating PHP scripts into a Vue.js project during the production process

When using the CLI to generate a project with vue create project I am trying to figure out how to integrate PHP code into .Vue files without breaking the build command: npm run build For example, I want to add some <?php ?> code i ...

phpvue.js

Guide to iterating through an array within an object in Vue.js

Can someone help me with looping through data fetched from an API using a GET request in Vue.js? This is the sample response obtained: "data": { "Orders": [ { "OrderID": 1, "Ordered_Products": { ...

javascriptapiloopsfor-loopvue.js

How to pass arguments to the `find` method in MongoDB collections

I've been attempting to pass arguments from a function to the MongoDB collection find method. Here's what I have so far: async find() { try { return await db.collection('users').find.apply(null, arguments); } catch(err) { c ...

javascriptnode.jsmongodbarguments

Issues with Mongoose connection in NextJS

I have been working on a small NextJS demo project where I utilize server actions to retrieve documents from MongoDB through Mongoose. However, I am encountering an error in my terminal that says: MongoNotConnectedError: Client must be connected before ru ...

node.jsmongodbmongoosenext.js

Improving callback function in express js

Currently, I am utilizing express and have multiple routers organized in separate files: router.post("/add", function (req, res, next) { if (isLoggedIn(req)) { nodeSdk.add( arg1, arg2, function (resp) { res.json(resp); ...

node.jsexpress

Creating captivating visuals using the perfect aspect ratio formula

I've been exploring the world of graphic magic in node.js Check out my code snippet below: gm('images/imagename').resize(200, 109, '^>').write('images/newimagename', function (err) { }); It's functioning as ex ...

node.js

Using JavaScript, extract the most recent 10 minutes worth of UNIX timestamps from a lengthy array

I am working with an array that contains multiple UNIX timestamps and I need to retrieve the timestamps from the last 10 minutes. Specifically, I only require the count of these timestamps, possibly for a Bot protection system. Would it be best to use ...

javascriptnode.js

The repairDatabase function cannot be found in the Collection.rawDatabase() method

Seeking guidance on repairing a database within Meteor. Currently executing the following code: Meteor.methods({ 'repairDB'(){ Users.rawDatabase().repairDatabase(); return true; } }); Encountering the following error: I20170630-18: ...

javascriptnode.jsmongodbmeteor

AWS Cognito User Pools Event Trigger Object

Looking to create a unique verification message for new users registered in my AWS Cognito User Pool. I'm attempting to link a Lambda function with a "Custom message" trigger to achieve this. The challenge lies in identifying the exact format of the ...

node.jsamazon-web-servicesaws-lambdaamazon-cognito

Unable to locate phonepe.intentsdk.android.release:IntentSDK:2.4.1 while integrating React Native

android build gradle : // Configuration options for all sub-projects/modules are defined in the top-level build file. buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = ...

javascriptandroidreactjsnode.jsreact-native

When utilizing Multer with NodeJS for uploading images, the image is successfully uploaded to the specified path. However, the request status remains pending, causing

When executing the function saveProduct, I encountered an issue with multiple fetch requests. The first request successfully uploads a file to the /public/images directory, but then the function fails to execute the second request POST /api/new-product. Ad ...

reactjsnode.jsfetchmulter

What is preventing me from merging these two arrays together?

Here is some code for a Vuex mutation: export const CREATE_PANORAMAS = (state, panoramas) => { console.log('building.panoramas:', state.building.panoramas) console.log('panoramas:', panoramas) state.building.panoramas.concat(p ...

javascriptvue.jsvuex

Organize library files into a build directory using yarn workspaces and typescript

When setting up my project, I decided to create a yarn workspace along with typescript. Within this workspace, I have three folders each with their own package.json /api /client /lib The main goal is to facilitate code sharing between the lib folder and b ...

node.jstypescriptyarnpkg

Is it possible to execute user-defined functions dynamically in a Node.js application without having to restart the server

I am exploring the potential for allowing users to insert their own code into a Node application that is running an express server. Here's the scenario: A user clicks 'save' on a form and wants to perform custom business validations. This ...

javascriptnode.jstypescriptnode-vm2

Passing data from a Vue.js component to a router in index.js

I am attempting to transmit a JWT token value from the component Login.vue and verify it in the router/index.js before directing the user to the next page. Login.vue: <script> import axios from "axios"; export default { name: "Login", m ...

javascriptvue.jsvuejs2

Personalize the position of the v-select drop-down menu

I am currently working with the vuetify v-select component. The problem I am encountering is that instead of the dropdown opening downwards, I need it to open upwards since the dropdown is positioned at the bottom of the page which causes some of the dro ...

cssvue.jsvuetify.js

Guide to establishing a connection with an implicit FTPS server using Node.js

Currently, I am working on a project that requires me to connect to an FTPS server over an implicit connection. After some research, it seems that the only library that supports this type of connection is node-ftp. Here is the code snippet I am using to e ...

node.jsexpressimplicitftps