How to run Nuxt (vue js framework) app on aws instance - vue.js

I am not vue js guy but I am trying to learn and run project on aws.
I could complete up to this.
I just want to change localhost to my IP address.
I checked few documentation where they referred to change nuxt.config.js but still I could not get where exactly I need to make change.
In Flask If I change host name from localhost to "0.0.0.0" in app.run. It start running on my IP address. Is there any similar concept here?
Any help highly appreciated.
Edit 1
This is how my present code structure

Related

Quarkus, Heroku and different environments

I'm currently developing a simple webapp with seperated frontend (Vue) and backend (quarkus REST API) project. For now, I've setup a MVP, where the frontend is displaying some simple data which is called from the backend. To get a working MVP i need to setup CORS support. However, first i want to explain my setup:
Setup
I'm starting developing environment of my frontend with npm run serve and of my backend with ./mvnw quarkus:dev. Frontend is running on localhost:8081 and backend running on localhost:8080.
Heroku allows to run your apps locally aswell with the command heroku local web. Frontend is running on port 0.0.0.0:5001 and backend on 0.0.0.0:5000.
To achieve this setup i setup two .env files on my frontend which are pointing to my backend api. If i want to work in development mode the file .env.development is loaded:
VUE_APP_ROOT_API=http://localhost:8080
and if i run heroku local web the file .env.local with
VUE_APP_ROOT_API=0.0.0.0:5000
is loaded.
In my backend I've set
quarkus.http.cors=true
in my application.properties.
Now I want to deploy those two projects to heroku and use it in production. Therefore I setup two heroku projects and set a config variable in my frontend project with the following value:
VUE_APP_ROOT_API:https://mybackend.herokuapp.com
Calls from my frontend are successfully working!
Question
For the next step, I want to restrict it more and just enable my frontend to call my API. I know i can set something like
quarkus.http.cors.origins=myfrontend.herokuapp.com
However, I dont know how i could do this on quarkus with different environments (development, local and production)? I've found this link but I don't know how to configure heroku and my backend app correctly. Do i need to setup different profiles which are applied on my different environments? Or is there another solution? Do i need Herokus Config Variables?
Thanks for the help so far!
quarkus.http.cors.origins is overridable at runtime so you have several possibilities.
You could use a profile and have everything set up in your application.properties with %prod.quarkus.http.cors.origins=.... Then you either use -Dquarkus.profile=prod when launching your application or you use QUARKUS_PROFILE=prod as an environment variable.
Another option is to use an environment variable for quarkus.http.cors.origins. That would be QUARKUS_HTTP_CORS_ORIGINS=....
My recommendation would be to use a profile. That way you can safely check that all your configuration is consistent at a glance.

Vue js routes mode history not working when deploy to sub directory

I am using vue cli version 2.9.6. I want to deploy to sub directory on shared hosting.
I was followed instruction from http://www.matjazev.net/blog/2018/03/01/using-vue-spa-created-with-webpack-in-subfolder/ and it work fine when using hash mode routes.
But if using history, there is a problem. The problem is when I access http://example.com/subdirectory/user for example, there is an error "The requested URL was not found on this server.".
But if I access http://example.com/subdirectory it works.
What is the problem?
Thanks in advance. Sorry my english is very poor.

Laravel Dusk: The correct localhost port for APP_URL on a remote server?

I am trying to install Dusk on Laravel at a REMOTE host and at some point I need to change the .env file like this
APP_URL=http://localhost:8000
Another tutorial suggested something like
APP_URL=http://localhost:9515
For a remote host, do I need to put "http://localhost:????" and if I need how do I find the port number? I not do I just leave it as "/"?
By the way, I have tested several options and non have worked so far so but I am not sure what causes it so I am trying to pint point the problem.
Set the APP_URL to the same URL you are using in the browser for your local development environment. This can be http://localhost but also a custom URL:
APP_URL=http://dusk.local
For Laravel Homestead you can manage your sites within your Homestead.yaml file.
The APP_URL is somehow important as commands from the terminal require this information as pointed out in detail in this answer.
The port 9515 is the default port number of the Selenium server URL as provided in DuskTestCase.php. There's no need to change it at the beginning as it should work out of the box.
By default, the ports are forwarded to your Homestead environment.

How to set virtual host in apache

I am trying to setup the virtual host in apache web server on Ubuntu. For this I followed lot of tutorials and did exactly the same step. But could not find the reason why it is not working for me.
For Now see the following youtube tutorial:
https://www.youtube.com/watch?v=IfRJ4e8UQfQ
I followed this tutorial and did exactly the same as in video. But still when I type testdomain.com on browser it does not show any thing from local machine. Instead of it looks for Internet domain.
Do I need to entry something in host file.
Please guide to find out problem why it is not working for me on ubuntu-14.
Thanks
You need to edit your /etc/hosts file. Append 127.0.0.1 testdomain.com, save and restart the browser.

Why using NGINX or how to deploy Meteor app correctly?

I am going to finish my Meteor app in a few weeks. So the problem that I will face - how to make my app available to other people.
Firstly I bought a droplet on Digital Ocean. And started to read about the ways to deploy meteor app to production server.
I found 2 totally different ways to do that!
The first one is pretty simple (and so I really love it). Here is the link. I have to do a few steps - create a droplet with Ubuntu 14.04, then connect to this droplet via ssh, then install and run mup. After that anybody can access to my app. I worry, that there is no ssl support (my project is e-commerce, so I really need https-connection), but then I found in mup docs a short article How to set up SSL with Mup. So everything is perfect at first glance.
But then I found another way to deploy meteor app. Here is link. It is much more complicated. First I need to install node and mongo on my droplet. Then install and configure nginx. And then after many steps comes Meteor installation. Author don't explain why people need do deploy app this way, assuming that it is obviously to everyone. His explanation is "The problem with this is that it isn’t wise to run an application like Meteor through your public port (which is 80)".
I admit I have no experience and knowledge in such questions. The one thing that I can say exactly is that I need a really proper way to deploy e-commerce meteor app. And it doesn't matter I won't sleep many hours by doing this.
So question is: which one way is proper? And (it is important) why?
Either security and performance are important for this project. I am also going to use prerender.io or spiderable (for seo purposes) and fast render, if it can have an influence on your answers. and really thank you for answers guys!
You can deploy your Meteor App on server via different mechanism . There are lots of way to do the same thing.
Like as you said you also found two ways to do that.
So in first link you used Meteor up for deployment your application as you successfully deployed .
In second approach you need to first login to the server and than create user than install everything needed to your server machine after that you need to setup Nginx.
So as i guess your question is related to "Nginx" . And you want to know
1)Why we need to use Nginx
2)Which one is the better approach
So answer for your first question is as follows:-
Nginx (pronounced "engine x") is a web server that is used for many purpose mainly use for proxy pass. Means using nginx you can redirect your request from one url to another and the actual url is hidden from the UI (For securety purpose and for redirection).
Like in meteor your app is by default running on 3000 so one way is that you can open 3000 port and run your application on that port. But via nginx you can run your app on 80 port and as user hit any event than in nginx you can configure address where you want to send your request.
Like you can send them to 3000 port.
So now user don't know in actual where is your request going on because you show them port 80 but in actual your request is go to 3000 port. So this is the one advantage of using nginx same there are lots more.
So for configuration of nginx you just need to install nginx if you are using ubuntu than via simple command-:
sudo apt-get install nginx
then setting in nginx configuration file that is under the following directory:-
/etc/nginx/sites-enabled/default
just open this file and setup up your configuration here like:-
server {
listen 80;
server_name localhost;
root /home/parveen/meteor/app;
location / {
index /index.html;
}
location /api {
proxy_pass http://localhost:3000;
}
}
In this way you can configure your nginx setting as you want please read nginx documentation for detail.
After that you need to start your server using forever or nohup which you want to use so that your server will not stop as you exit from the login of server.
Conclusion:-
In the second approach you need to install everything by yourself via ssh login to your server than configuration of nginx and and then run your server.
If you do any changes than again you need to update your changes to server and then stop meteor app then restart that. But this is more secure approach and you can do what you want to do.
In first approach they are using mup (Meteor up) that do so many of works for you . You just need to do some configuration you can use Docker or as define in the blog (droplet) link you shared and just need to run meteor up command and that will first create a bundle for your app than run that so in the first approach if you do any changes than you not need to login again to your server update changes , what you need to do is just run again the same command and that will create new bundle with updates and run your project. But i don't think that is more secure.
So its depend on your requirement and choice which you want to use.
If you have any question than most welcome.
Hope this would help!
Thanks