Alokai•2y ago

How to Deploy Vue Project in Nuxt to my Ubuntu Server

i configured my server using pm2 and apache2 but when loading using the ip address it doesn't fetch data from the backend
but when i test1 in the server machine by localhost:3002 it working fine ,test2 access in the server machine by the server actual ip:3002 same issue doesn't fetch data from backed
Please help me :vsf:

rohrig•2/12/24, 10:34 AM

Hi @Tomy

, check out this open source deployment guide. https://docs.vuestorefront.io/cookbook/oss-deployment-guide

Vue Storefront Docs

OSS Deployment Guide

In this guide we'll show you how to deploy an Open Source Vue Storefront application to a production server.

Tomy K.(Томас)OP•2/12/24, 11:02 AM

Thanks @rohrig for your response am checking the guide before that
in me local pc am working in vuestorefront project when i run with
yarn dev -> it gave me the http://10.10.20.55:3001
but when i browse its not working but
when i use http://localhost:3001 it working fine instead of the ip address
here is my nuxt configuration :

import webpack from 'webpack';
import { getRoutes } from './routes';
import theme from './themeConfig';

export default {
server: {
port: process.env.PORT 'http://localhost:3000/shop-api',
SECRET_KEY: process.env.SECRET_KEY,
ACCESS_KEY: process.env.ACCESS_KEY,
PROFILE_ID: process.env.PROFILE_ID,

},

rohrig•2/12/24, 12:05 PM

I'm guessing port 3000 was already taken so it tried 3001.

rohrig•2/12/24, 12:07 PM

I'm also a bit confused about your port settings . . . are you attempting to run nuxt on port 3000 and the middleware also on port 3000?

Tomy K.(Томас)OP•2/12/24, 12:16 PM

i need to run in port number 3001 and the backend run in port number 3000
it think discord remove 3001
GRAPHQL_API:process.env.GRAPHQL_API || 'http://localhost:3000/shop-api'

Tomy K.(Томас)OP•2/12/24, 12:19 PM

when i browse using localhost:3001 working fine

Tomy K.(Томас)OP•2/12/24, 12:21 PM

but when i browse using :
[dev:*theme]

Listening on: http://10.10.4.160:3001/

rohrig•2/12/24, 12:23 PM

why are you trying to use http://10.10.4.160:3001/ ?

Tomy K.(Томас)OP•2/12/24, 12:24 PM

i need to test in my local server without additional configuration

rohrig•2/12/24, 12:25 PM

both the middleware and nuxt should be reachable via localhost

rohrig•2/12/24, 12:27 PM

If you're deploying somewhere, you need to set up a reverse proxy so that both applications can run on the same server.

rohrig•2/12/24, 12:27 PM

I show you how to do that in the guide I linked above

Tomy K.(Томас)OP•2/12/24, 12:28 PM

here is the middleware configuration :
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
module.exports = {
integrations: {
vendure: {
location: '@vue-storefront/vendure-api/server',
configuration: {
api: {
uri: process.env.GRAPHQL_API,

// to be used later with authentication
tokenMethod: process.env.TOKEN_METHOD,
},
},
},
},
};

Tomy K.(Томас)OP•2/19/24, 5:12 AM

Thanks @rohrig
i fixed my issue
By oss development guide
before deploying to local server only for testing or production we should have valid SSL certificate if not there is CORS error..
1ST i used pm2 to start my service and acquire domain name ssl after that i follow the documentation and its working Thanks!

How to Deploy Vue Project in Nuxt to my Ubuntu Server

Similar Threads

Similar Threads

Similar Threads