I started a new project to practice golang and vuejs
Because of low income 🥲 and server still have spare resources ( 1 GB ram + 1 GB swapfile, single intel core), I decide to deploy everything to current server.
When server receive a request it need to know which app will serve that request. I use url path to distinguish the request (by config nginx location). Vue App location: '/bo' Golang API app: '/api/v1' Rails app: '/'
Each app will be ran inside a container. Rails will have a docker-compose file and vuejs and golang will have another docker-compose file.
3. Problems
Problem 1: Point upstream to container failed. Nginx return 502 Bad Gateway Nginx.
I pointed upstream for Rails app before so I just do the same for Golang and Vue app
Rails app:
upstream app_service {
server app:3000;
}
Golang & Vuejs:
upstream app_be_service {
server app_be:3000;
}
upstream app_fe_service {
server app_fe:8080;
}
Inside docker-compose file rails service is app, golang service is app_be, vuejs service is app_fe. When first see the error, I thought that upstream is point to wrong service. After recheck I found that Vuejs and Golang were running on separated network bookorganize_internal, nginx and rails service were running on blog_internal. So I fixed it, everything run on blog_internal now.
Problem 2: Receive 404 error when request to Vuejs app.
After rebuilt Golang and Vuejs service, the first thing I do is test with route 'api/v1/healthcheck'. I found that Golang is working fine.
Sống rồi
But the Vuejs app return 404 🤯. After some research and test in local, I found that each time I go to path xyz:9999/ it would automatically redirect to xyz:9999/bo and work normally but when I typed xyz:9999/bo on url directly it would return 404. I guess that when I receive path /login Vuejs would not automatically redirect to /bo/login as I thought. The thing Vuejs do is after serve /bo/login it would change the url to /bo/login so if I typed /bo/login it couldn't find any route match /bo/login request. I don't know if this problem can be solved by config Vuejs but I know I can solve this by change nginx config. The ideal was each time the server received the request starting with /bo/ it would automatically remove /bo before pass the request down to the Vuejs app. image.png Config vue-router: image.png After rebuild and restart nginx service the 404 error went away.
Problem 3: Can't load resources (js and css) from Vuejs
The annoying 404 page no longer show up but the screen is now blank. Check the browser's console I found this: image.png The reason it couldn't load the assets was the request path is /assets/ => Nginx not found /bo leading so as our nginx config it would pass the request to Rails app. I couldn't config nginx /assets/ request went to Rails app because Rails app serve its /assets as well. The solution will be revealed in Deploy multiple source to the same server (Part 2)
