How to create for dockerized vue3 app an endpoint for liveness probe status? - vue.js

I have a vue3 typescript app, which runs in a docker on k8s.
Vue app has different routes
/
/about
/login
all those routes will send back a html response from vue component.
For docker liveness probe I need a simple json response
/status -> HTTP 200 & res=> JSON {status:ok}
How can Vue3 respond only with JSON object on specific route?
my dockerfile
FROM node:16.13.0 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build
FROM nginx:1.20.1 as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf
COPY /entrypoint.sh /entrypoint.sh
EXPOSE 80
ENTRYPOINT ["/entrypoint.sh"]

I solved it by adding in nginx.conf additional location for liveness
location /health/liveness {
#access_log off;
error_log off;
add_header 'Content-Type' 'application/json';
return 200 '{"status":"ok"}';
}
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 example.com;
location / {
root /app;
index index.html;
try_files $uri $uri/ /index.html;
}
location /health/liveness {
#access_log off;
error_log off;
add_header 'Content-Type' 'application/json';
return 200 '{"status":"ok"}';
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}

Related

How to use a dev server proxy with Ionic + Vue?

I want to use Ionic's Proxies feature in an Ionic Vuejs project.
I have seen questions and answers for proxy problems with Ionic + Angular, and for Vue + Webpack, but couldn't find a solution for my Ionic + Vue problem.
For now I am just working in a browser (i.e. and not building for native yet).
I followed the instructions, and my ionic.config.json now looks like this:
{
"name": "myapp",
"integrations": {
"capacitor": {}
},
"type": "vue",
"proxies": [
{
"path": "/webhp",
"proxyUrl": "https://www.google.com"
}
]
}
I run ionic serve --no-open and browse to http://localhost:8100/webhp.
The request is not proxied, my app is loaded, and I get a router error: [Vue Router warn]: No match found for location with path "/goto".
When I try to access that URL using an AJAX request in my code:
await axios.post("/webhp");
I get an error:
I am using Ionic CLI 6.12.2 and Ionic Framework #ionic/vue 5.5.2.
What am I doing wrong?
Got it finally up and running.
I added a vue.config.js with the devServer Section as I always did in "normal" vue projects.
ionic serve no starts with the wanted proxy configuration and my backend is proxied to the given address.
This my vue.config.js I added:
module.exports = {
runtimeCompiler: true,
devServer: {
proxy: {
'/api': {
target: 'http://ionicfez:8888/',
changeOrigin: true,
logLevel: 'info'
}
}
},
publicPath: './',
outputDir: 'dist',
assetsDir: 'assets'
}
This is my ionic.config.json
{
"name": "ionicfez",
"integrations": {
"capacitor": {}
},
"type": "vue"
}
My project is structured as
/ionicfez
/public
/api
/hello.php
/src
...
And this is a simple test function in my .vue file, that now is proxied
init() {
this.axios
.get("public/api/hello.php")
.then(result => {
console.log(result)
})
.catch(error => console.error(error))
}
I mentioned in a comment that I implemented a workaround using nginx, and was asked for details, so I am posting it as an answer.
In my setup, I have nginx listening on port 8888 and the Webpack Dev Server listening on port 8100.
I access the website via port 8888, e.g. http://local.mydomain.com:8888/.
My nginx configuration looks like this:
server {
listen 8888;
listen [::]:8888;
root /home/user/mydomain/public;
index index.php;
server_name local.mydomain.com;
location / {
proxy_pass http://local.mydomain.com:8100/;
proxy_set_header Host local.mydomain.com:8100;
}
location /x/ {
add_header Access-Control-Allow-Origin "*";
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
fastcgi_keep_conn on;
fastcgi_split_path_info ^(.+?\.php)(/.*)$;
if (!-f $document_root$fastcgi_script_name) {
return 404;
}
fastcgi_read_timeout 86400;
include fastcgi_params;
}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
location ~ /\.ht {
deny all;
}
access_log /var/log/nginx/local.mydomain.com.access.log;
error_log /var/log/nginx/local.mydomain.com.error.log;
}
Requests for paths that begin with /x/ go to index.php.
All other requests get proxied to Webpack on port 8100.
The rest of the configuration is not actually related to this proxy thing; I just included it to give a complete config.

Deploy VUE project on Nginx, static file like css, js can not be found

My OS is window, and deploy VUE project on Nginx server.
Build VUE project
cd E:\test\test-project-frontend-demo
npm install && npm run build
config nginx:
nginx.conf
worker_processes 1024;
pid logs/nginx.pid;
events {
multi_accept on;
worker_connections 65535;
}
http {
#MIME
include mime.types;
default_type application/octet-stream;
#LOGGING
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 logs/access.log main;
error_log logs/error.log warn;
charset utf-8;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
server_tokens off;
log_not_found off;
types_hash_max_size 2048;
client_max_body_size 16M;
#keepalive_timeout 0;
keepalive_timeout 65;
gzip on;
#SITES
include sites-available/project.conf;
}
project.conf
server {
listen 80;
listen 443 ssl;
server_name project.testltd.com;
# security
include nginxconfig.io/security.conf;
# logging
access_log logs/project.access.log;
error_log logs/project.error.log warn;
# site project
location / {
alias E:/test/test-project-frontend-demo/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
# additional config
include nginxconfig.io/general.conf;
# ssl config
include nginxconfig.io/self-signed.conf;
include nginxconfig.io/ssl-params.conf;
}
start nginx:
nginx.exe -c conf/nginx.conf
index.html can be access , and response is 200, but static file like css and js can not be accessed, Why?

How to make css and js file in vue project work in production with nginx

I've Vue project here is my path vue in Ubuntu 18.04
/var/www/html/vue/{ project here }
the problem is my css path are /css which refer to /var/www/html/css
How to set up my css in vue project refer in folder here is my nginx setup
server {
listen 80 default_server;
listen [::]:80 default_server;
listen 443 ssl;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
location /vue {
// I try to make root path but It's not workking error 500 when I uncomment #root
#root /var/www/html/vue;
try_files $uri $uri/ /vue/index.html;
}
}
You can try the following with your current config:
location /css {
alias /var/www/html/css;
}

Problems with a decoupled frontend and php backend in docker-compose

I've been struggling on a problem with a docker-compose environment where a Single Page Application should talk to a PHP api. Preferrably laravel.
My approach is to have nginx act as a reverve proxy for both.
However, every time i try to hit the /api route, it says file not found. the php-fpm do recieve the request, but it apparantly fails to load the index, even tough it is in the specified folder.
My docker-compose.yml looks like this.
version: "3.1"
services:
redis:
image: redis:alpine
container_name: apitest-redis
postgres:
image: postgres:9.6-alpine
container_name: apitest-postgres
working_dir: /application/api
volumes:
- ./api:/application/api
environment:
- POSTGRES_USER=myapiuser
- POSTGRES_PASSWORD=2cr34m1ng#n4k3d
- POSTGRES_DB=test
webserver:
image: nginx:alpine
container_name: apitest-webserver
working_dir: /application
volumes:
- ./client/dist:/application/dist
- ./api:/application/api
- ./docker/nginx/nginx.conf:/etc/nginx/conf.d/default.conf
ports:
- "8080:80"
php-fpm:
build: docker/php-fpm
container_name: apitest-php-fpm
working_dir: /application/api
volumes:
- ./api:/application/api
- ./docker/php-fpm/php-ini-overrides.ini:/etc/php/7.2/fpm/conf.d/99-overrides.ini
And my nginx.conf looks like this:
server {
listen 80 default;
client_max_body_size 108M;
access_log /var/log/nginx/application.access.log;
root /application;
index index.html index.php;
location / {
root /application/dist;
try_files $uri /index.html;
}
location /api {
root /application/api/public;
try_files $uri /index.php?$query_string;
}
location ~ \.php$ {
fastcgi_pass apitest-php-fpm:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PHP_VALUE "error_log=/var/log/nginx/application_php_errors.log";
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
include fastcgi_params;
}
}

Nginx configure SSL error "ERR_SSL_VERSION_OR_CIPHER_MISMATCH"

I configure my nginx for a https service, but it does not work. The chrome showed error "ERR_SSL_VERSION_OR_CIPHER_MISMATCH". It's seemed like that the browser want an ssl protocol that my nginx can't support? However, I followed the official document from where I got the CA to configure my nginx.conf file as below.
I run curl https://ltp-cloud.com and get error "curl: (35) error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure"
There is my nginx.conf:
```
user www-data;
worker_processes 4;
pid /var/run/nginx.pid;
events {
worker_connections 768;
# multi_accept on;
}
http {
server {
listen 443;
server_name ltp-cloud.com;
ssl on;
root html;
index index.html index.htm;
ssl_certificate /etc/nginx/ssl/cert/214234087720826.pem;
ssl_certificate_key /etc/nginx/ssl/cert/214234087720826.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root html;
index index.html index.htm;
}
}
}
My Nginx version is below and I checked that "--with-http_ssl_module" option is on.
➜ nginx nginx -V
nginx version: nginx/1.4.6 (Ubuntu)
built by gcc 4.8.4 (Ubuntu 4.8.4-2ubuntu1~14.04.3)
TLS SNI support enabled
configure arguments: --with-cc-opt='-g -O2 -fstack-protector --param=ssp-buffer-size=4 -Wformat -Werror=format-security -D_FORTIFY_SOURCE=2' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro' --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log --error-log-path=/var/log/nginx/error.log --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --with-debug --with-pcre-jit --with-ipv6 --with-http_ssl_module --with-http_stub_status_module --with-http_realip_module --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gzip_static_module --with-http_image_filter_module --with-http_spdy_module --with-http_sub_module --with-http_xslt_module --with-mail --with-mail_ssl_module --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/nginx-auth-pam --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/nginx-dav-ext-module --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/nginx-echo --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/nginx-upstream-fair --add-module=/build/nginx-hzyca8/nginx-1.4.6/debian/modules/ngx_http_substitutions_filter_module
Request your help on this.
Thanks!