I dockerized a Vue app using nginx and the app is running well when started. The problem comes when I refresh the page, I am getting 404 error in an image attached. I tried to configure my nginx.conf file like solutions from How to use vue.js with Nginx? and still get the same error. I will show my current nginx.conf file and Dockerfile.
Error image:
nginx.conf file:
server {
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
Dockerfile:
# Step 1: Build Vue Project
FROM node:14.15.1 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# Step 2: Create Nginx Server
FROM nginx:1.20 AS prod-stage
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
I had the same problem. I found the answer here https://stackoverflow.com/a/54193517/7923299. Add this to your Dockerfile
# Add nginx config
COPY [your_nginx_file.conf] /temp/prod.conf
RUN envsubst /app < /temp/prod.conf > /etc/nginx/conf.d/default.conf
I would suggest adapt your nginx.conf because it is best practice not to run port 80 inside a container.
I wrote a more detailed explanation here: How to config nginx for Vue-router on Docker
Related
Faced with the problem of building a project based on Vue 3 inside a Docker container together with Nginx.
Dockerfile:
# Non-prod as builder
FROM node:18.13.0 as build-stage
WORKDIR /app
COPY package*.json ./
COPY package-lock.json ./
RUN npm ci
COPY . .
# Build the project
RUN npm run build
# Prod
FROM nginx:1.19 as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
nginx.conf:
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /app;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
Docker build an image for me, I launch the container with the following command:
docker run -it -p 8080:80 --rm --name vue-app-1 user/vue-app
After trying to access it inside the browser using localhost:8080 - there is no static.
Errors in the browser console:
Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
But when I try to build a project without Nginx, everything is fine. What is the problem?
I am really new to AWS EC2. I hosted my Express.js on AWS EC2 using PM2.
Here is the current log of EC2 of my app.
I don't know whether this is working or not.
My public IPv4 address is (52.90.33.231).
If Nginx is required, please guide me through its steps because I have no prior experience.
I am also adding the inbound rules here.
http://localhost:5002/questapi
The above url used to give me the following data:
So
52.90.33.231/questapi is the working url.
I would prefer using Docker to run your application in EC2 instead of using PM2, It will be easy for you to migrate your application to any environment irrespective of application dependencies. PM2 is a good deployment tool but the better answer will be DOCKER.
Regarding NGINX, You can use NGINX or APACHE web servers to enable reverse proxy on your Node services to route your 5002 port to 443/80. There also I would suggest using AWS Application load balancer because it will provide the same and easy for you to install SSL certificate using AWS CERTIFICATE MANAGER.
Steps to Docker Node deployment in Ec2
Install DOCKER in your EC2 machine - Follow this reference URL
Clone your NodeJS codebase in the EC2 machine and add Dockerfile in the root folder in your codebase. Below I will add the Dockerfile sample.
Build docker image using this command in your root folder of the project docker build --no-cache -t <your_application_name>:latest .
Run NodeJs docker image using the given command
sudo docker run --name <your_application_name> -itd --net="host"
-e 5002:5002
--restart unless-stopped
<your_application_name>:latest;
Now you can start using the application on <your_instance_public_ip>:5002, Make sure to enable the 5002 port in security group inbound access.
In between, Here I'm adding a reference link to use Aws ALB to hide your EC2 IP address and application port number by using reverse proxying rules.
https://www.clickittech.com/devops/deploy-nodejs-app-to-aws/
DOCKERFILE Sample for NODEJS application
FROM node:14.0
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm#5+)
COPY package.json /usr/src/app/
RUN npm install
# Bundle app source
COPY . .
EXPOSE 5002
CMD [ "node", "server.js" ] # you can add your start command
you should refer to this video (from Brad Traversy) where he deploys the Nodejs application on DigitalOcean droplet using pm2, but for deploying on AWS EC2 you can follow the exact same steps as both use the Ubuntu OS, NGINX and pm2 for configuring the application.
NODEJS DEPLOYING TUTORIAL
I tried to deploy for the first time a MERN app on the AWS EC2.
I completed this article's steps, except for installing the mongodb, because I used Ubuntu 20.04 instead of 16.04, I used the docs and it had worked.
In the end I opened the app.js from /server/dist with pm2 and I had got the status of working, but when I wanted to access the website, it said that the connection was refused.
This is my github repository.
If you have time and experience with AWS EC2, please check it! I didn't find anything, why it wouldn't work.
UPDATE:
I tried to curl the localhost, and it returns the html page, so it works.
I checked the status of the nginx and it is running, but I think nginx is the problem.
I tried to set it up using this article. And when I test the nginx I got an ok, but it still doesn't work.
This is what /etc/nginx/sites-enabled/amazon-clone contains:
server {
listen 80;
listen [::]:80;
root /var/www/your_domain/html;
index index.html index.htm index.nginx-debian.html; server_name;
location / {
try_files $uri $uri/ =404;
proxy_pass http://172.31.39.190:5000;
}
}
I have developed node rest api and vuejs web applications,
Im trying to deploy both project in to one aws server which run ubuntu.
Both applications have different port,
domain I try to configure api.example.com for api and example.com for vue app.
I can run both applications once after running the command in SSH, but I need them to run it forever.
What I did,
Deploy to apps separately
Apps can access with ports
I need them access
api.example.com
example.com
what are the step to do,
Any changes host file.
I found another way to deploy vue app and express/nodejs in one server without using PM. This what I did
Build your vue code using npm run build command. This will create a folder dist which should have index.html file and static folder.
Copy dist folder into your server code repository. In my case I created a folder public and moved the dist folder inside public.
In app.js file right before module.exports=app line, copy the following lines of code
//These 2 lines make sure that vue and express app are coming from the same server.
app.use('/static', express.static(path.join(__dirname,"../public/dist/static/")));
app.get('/', function(req,res) {
res.sendFile('index.html', { root: path.join(__dirname, '../public/dist/') });
});
First line make sure that the /static folder is accessible and second line will serve the index.html file when you run the node server. Routing between components will be taken care by vue.
This is how we are running our VueJS UI and ExpressJS REST API from the same server.
We are managing our services with PM2.
VueJS (Dev Environment, You can add the same settings to production)
In package.json add "start": "HOST='0.0.0.0' PORT=80 npm run dev",, where 80 is the port VueJS is listening on, to the "scripts": {..} array. Then, after installing PM2, (for dev) we can start VueJS with cd /location/of/vue/root; sudo pm2 start npm run dev --name Vue -- start. (Make sure that Apache is not running).
Please note that setting the HOST to 0.0.0.0 is important. Do not set it to LocalHost or your Servers IP address or you may run into issues.
ExpressJS
In the /location/of/express/app.js add this similar to the bottom of the file:
app.listen(process.env.PORT || 8081), where 8081 is the port your REST API should be listening on. I can then start it with sudo pm2 start /location/of/express/app.js --name Express
At this point, the VueJS should be available at www.example.com (implied Port 80) and the REST API would be available at www.example.com:8081.
If you want to have api.example.com/ point to the API, you need to make sure that your DNS is pointing the "api" subdomain to the desired port, or you may have to add the port into the URL as above.
Additionally, you can easily follow the logs through PM2 as well with pm2 logs APPNAME --lines 100.
I have installed node.js and necessary packages to run browserquest. I have started the browserquest server, which is running on port 8080 and when I go to my browser and type http://localhost:8080/status I can see that server is running and currently no clients are connected. I build the client with configurations like this in client/config/build_config.json file
{
"host": "http://127.0.0.1",
"port": 8080
}
I build my client within bin/build.sh. Then I run this command to create http-server to serve client files.
http-server path-to-client-build -p 8000
I can see the index page with the httpserver running by going to http://localhost:8000/index.html but when I try to connect it gets stuck after saying connecting to server.
NOTE: I am using this http-server to host client files http://search.npmjs.org/#/http-server
I think the client-build has some problems on the current release on github. Instead I have used the actual client folder. I have followed these steps to make it work.
Make sure you have installed node and npm.
1) get a copy from github repo.
git clone https://github.com/mozilla/BrowserQuest.git
2) Install the required node packages for the server
npm install underscore log bison websocket websocket-server sanitizer memcache
3) Start the server
node server/js/main.js
4) go to the client directory and install http-server module to serve the client files
cd client
npm install -g http-server
5) edit config_build.json-dist to point to your host ip and port (in my case 127.0.0.1 localhost)
{
"host": "127.0.0.1",
"port": 8000,
"dispatcher": false
}
6) copy the edited config_build.json-dist to 2 new files
cp config_build.json-dist config_build.json
cp config_build.json-dist config_local.json
7) copy shared folder into client folder
cp -r ../shared .
8) start the http-server to serve the client files
http-server
And your server and client should be running. You can check if the server is running by going to http://ipaddress:port/status which should display an array of connected clients. If none an empty array. And your client should be running on http://ipaddress:8000/index.html
based on the tutorial from dirkk0
https://gist.github.com/2275361