I have a dockerized vue-cli app which is being run on NGINX environment.
Any time the image container starts we are seeing the CPU usage climb to nearly 100% then drop then climb then drop again.
Apparently the offending item is "/app/node_modules/.bin/vue-cli-service"
This is preventing the site from being reached and we are getting a 502 error.
Any idea what might be causing the problem.
I am happy to provide any other necessary information.
Here is my dockerfile
FROM node:lts-alpine
RUN mkdir -p /app
COPY . /app
WORKDIR /app
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
package.json
"scripts": {
"dev": "cross-env NODE_ENV=development vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "cross-env NODE_ENV=production vue-cli-service serve --port 3000"
},
In vue.config.js
,
devServer: {
disableHostCheck: true
}
With the limited information you provided, it looks like you're running a development environment in production. What you should do instead is build a production bundle, which consists of static assets - .html, .js, .css files, images etc., and serve that using a web server like nginx. For more details you can read https://cli.vuejs.org/guide/deployment.html .
Related
I am trying to deploy a Nextjs app in my ubuntu vps and I have apache2 as my virtual host. Can I deploy using apache or there is any other better methods
you can install pm2 in your vps
and then you can start
expecting you have following scripts in package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
after building the project by npm run build
and then
pm2 start "npm start -- -p Port" --name name-of-process
(replace 'Port' and 'name-of-process' with correct values, and make sure you are inside the project folder before running the commandes)
pm2 start npm -- serve
pm2 start npm --watch -- run dev
pm2 start npm --name "vue-app" -- start
sudo pm2 start npm run serve --name vue-app -- start
When I run those it will start a process but not my app because when I do sudo lsof -i -P -n | grep LISTEN I don't see the 8080 port being used, either that or I get "script not found".
Here is my package.json:
{
"name": "vue-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
}
Since at least one of those commands have to be correct, do I have to modify my package.json file?
What I did to make it work was cd into the root folder of the frontend and run this command:
pm2 serve dist 8080 --spa
But as kissu mentioned I'll need to move it to a different host since it's a static app, amplify or netlify for exemple.
S3 is not a good place for an app, it's more for assets since it's quite slow AFAIK. But you can host it there if you really want to host on AWS.
More difficult to connect to the backend? Not really, pretty much the same: target an URL.
You could micro-optimize it on the same provider with kubernetes and all, but this is probably out of the scope here.
In my Vue JS application I have a file called .env.individual which defines a variable use for making API calls to the backend.
I also have .env and .env.production, etc, all with different values for the API URL variable.
When I run npm run serve -- --mode individual the application starts up and uses the URL found in the .env.individual file. Likewise, when I run npm run serve -- --mode production the application starts up and uses the variable found in the .env.production file.
Given the above I was assuming that when I run npm run build -- --mode individual the \dist would be generated and I could then run npm run serve and the application would use the variables found in the .env.individual file.
Given my package.json file contains this:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "vue-cli-service s3-deploy",
"release": "npm run build && npm run deploy"
},
What is npm run serve actually doing and why - when I want to use a specific .env.XXX file do I need to specify it exactly?
npm run serve does not run your application from /dist folder. It compiles unoptimized build in memory (RAM). If you want run your optimized build from /dist folder, you can run it by some http server. For example https://www.npmjs.com/package/http-server .
How do I configure webpack in vue to produce a production code/build but using a development config?
I have the following two npm scripts:
"build": "vue-cli-service build",
"build-dev": "vue-cli-service build --mode development",
And two config files:
.env.production
.env.development
Now I need to deploy the code to the development server and make sure the code is absolutely the same as in production so I can test it properly first, but I need to use the dev database for that.
Any thoughts on how to make webpack to create a production code with the mode set to anything else rather than production?
It was just a matter of overriding NODE_ENV=production in the .env config file.
So something like this solved the problem:
# .env.staging
NODE_ENV=production
OTHER_VARS=...
And a script:
"build-stage": "vue-cli-service build --mode staging",
Trying to figure out how can I create a production build with webpack but first run it locally as a last test before deploying it to the server.
I was thinking of creating another command something like npm run build_local for that purpose but can't quite figure out how to do that.
I can see the following in the root package.json and I was thinking of somehow combining dev + build but can't figure out how to do that (or using config otherwise):
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
Any advice on how can I run a production build in localhost with something like npm run build_local command?
EDIT
What I've tried so far is to run (manually) http-server ./dist which seem to run the folder on localhost, but the result in fact deviates from production (and dev) behavior - in my case it first renders everything as expected but as long as I press refresh, it returns 404 not found which is unexpected (on dev and server deployed versions it still renders the login page in this case):
for example if I open localhost:8080, vue redirects me to localhost:8080/login which is expected and works fine. On refresh it gives 404 though.
Ideally I'd expect it to work at least in the same way as dev build on localhost.
Any ideas?
So it was as simple as combining the dev command and providing prod config to it under the root package.json:
"build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
//
Or in the package.json:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
"build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
}
Now I can do npm run build_local which runs production build on localhost
Note: as per this github thread and this doc reference to prevent 404 on refresh also add the following to your webpack.prod.conf.js (anywhere in the file, but for reference you can paste it just before plugins)
devServer: {
contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true, //this line is requried
compress: true,
port: 9000
},
You can now check your production build under the localhost:9000
If anyone knows about any drawbacks give me a comment or post the corrected answer