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)
Related
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.
When building my Vue development server (yarn serve) each time I run it the port my project is being served on is incremented by 1 (3000 to 3001) each time I run yarn serve I am also making sure to exit the previous process...
Is there any known reason this is happening? I've have tried searching for this but have seen nothing similar to this.
My package.json scripts block:
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
This is probably because you still have a running service on the port 3000, that's why it's incrementing itself.
Try using
sudo lsof -i -P -n | grep 3000
or
sudo netstat -nlp | grep :80
Then, you could kill it with specific CLI command or a basic kill 11528 (kill + PID of the process). You could also use a SIGKILL with kill - 9 PID if the process doesn't want to shutdown.
PS: also, you should have a notice of it when you launch your server.
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 .
I developed a nuxt js/ vuetify and tailwindcss app that works perfectly on my local host but after deploying to heroku server, the app looks disorganized. No/irregular style.. Apis are not working. Below is my build script and screenshots of both local and heroku. Any help will be appreciated
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate",
"heroku-postbuild": "yarn build"
},
This is the screenshot on my local host
Screenshot of app in heroku server
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