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;
}
Related
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;
}
}
}
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.
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?
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;
}
}
I'm trying to configure Nginx with puppet/nginx module from forge.puppet.com (by Vox Pupuli), using this Hiera yaml file:
nginx::nginx_servers:
'devops-alldomains':
server_name:
- '~^(?<fqdn>.+?)$'
www_root: '/var/www/$fqdn'
index_files:
- 'index.php'
try_files:
- '$uri'
- '$uri/'
- '/index.php?$args'
access_log: '/var/log/nginx/devops-alldomains-access.log'
error_log: '/var/log/nginx/devops-alldomains-error.log'
'devops-alldomains-ssl':
server_name:
- '~^(?<fqdn>.+?)$'
listen_port: '443'
www_root: '/var/www/$fqdn'
ssl: true
ssl_key: '/etc/ssl/www/$fqdn.key'
ssl_cert: '/etc/ssl/www/$fqdn.crt'
index_files:
- 'index.php'
try_files:
- '$uri'
- '$uri/'
- '/index.php?$args'
access_log: '/var/log/nginx/devops-alldomains-access-ssl.log'
error_log: '/var/log/nginx/devops-alldomains-error-ssl.log'
nginx::nginx_locations:
'devops-alldomains':
location: '~ \.php$'
www_root: '/var/www/$fqdn'
server: 'devops-alldomains'
fastcgi: 'unix:/var/run/php7-fpm.sock'
fastcgi_split_path: '^(.+\.php)(/.*)$'
fastcgi_index: 'index.php'
fastcgi_param:
'SCRIPT_FILENAME': '$document_root$fastcgi_script_name'
'devops-alldomains-ssl':
location: '~ \.php$'
www_root: '/var/www/$fqdn'
server: 'devops-alldomains-ssl'
fastcgi: 'unix:/var/run/php7-fpm.sock'
fastcgi_split_path: '^(.+\.php)(/.*)$'
fastcgi_index: 'index.php'
fastcgi_param:
'SCRIPT_FILENAME': '$document_root$fastcgi_script_name'
BUT when it generates two Nginx configs (devops-alldomains.conf and devops-alldomains-ssl.conf), the SSL one is not as expected:
location / {
root /var/www/$fqdn;
index index.php;
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
root /var/www/$fqdn;
include /etc/nginx/fastcgi_params;
fastcgi_pass unix:/var/run/php7-fpm.sock;
fastcgi_index index.php;
fastcgi_split_path_info ^(.+\.php)(/.*)$;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
# MANAGED BY PUPPET
server {
listen *:443 ssl;
server_name ~^(?<fqdn>.+?)$;
ssl on;
ssl_certificate /etc/ssl/www/$fqdn.crt;
ssl_certificate_key /etc/ssl/www/$fqdn.key;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE- RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA- AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256- GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS;
ssl_prefer_server_ciphers on;
index index.php;
access_log /var/log/nginx/devops-alldomains-access-ssl.log combined;
error_log /var/log/nginx/devops-alldomains-error-ssl.log;
location / {
root /var/www/$fqdn;
index index.php;
try_files $uri $uri/ /index.php?$args;
}
}
So as you can see, location directives are outside of server directive, so Nginx will never start. Has anyone an idea what could be wrong? I even tried to simplify this configuration to use only basic directives (even without ssl and php) but the result was quite the same. Thanks a lot for your help.
UPDATE:
It looks I managed to resolve the problem with your help guys ;) This is the current config:
nginx::nginx_servers:
'devops-alldomains':
server_name:
- '~^(?<fqdn>.+?)$'
www_root: '/var/www/$fqdn'
index_files:
- 'index.php'
try_files:
- '$uri'
- '$uri/'
- '/index.php?$args'
access_log: '/var/log/nginx/devops-alldomains-access.log'
error_log: '/var/log/nginx/devops-alldomains-error.log'
'devops-alldomains-ssl':
server_name:
- '~^(?<fqdn>.+?)$'
listen_port: '443'
ssl_port: '443'
www_root: '/var/www/$fqdn'
ssl: true
ssl_key: '/etc/ssl/www/$fqdn.key'
ssl_cert: '/etc/ssl/www/$fqdn.crt'
index_files:
- 'index.php'
try_files:
- '$uri'
- '$uri/'
- '/index.php?$args'
access_log: '/var/log/nginx/devops-alldomains-access-ssl.log'
error_log: '/var/log/nginx/devops-alldomains-error-ssl.log'
nginx::nginx_locations:
'devops-alldomains-loc':
location: '~ \.php$'
www_root: '/var/www/$fqdn'
server: 'devops-alldomains'
fastcgi: 'unix:/var/run/php7-fpm.sock'
fastcgi_split_path: '^(.+\.php)(/.*)$'
fastcgi_index: 'index.php'
fastcgi_param:
'SCRIPT_FILENAME': '$document_root$fastcgi_script_name'
'devops-alldomains-ssl-loc':
location: '~ \.php$'
www_root: '/var/www/$fqdn'
server: 'devops-alldomains-ssl'
ssl: true
ssl_only: true
fastcgi: 'unix:/var/run/php7-fpm.sock'
fastcgi_split_path: '^(.+\.php)(/.*)$'
fastcgi_index: 'index.php'
fastcgi_param:
'SCRIPT_FILENAME': '$document_root$fastcgi_script_name'
Now I have two separated Nginx config files - one for non-SSL, second for SSL. First problem was that I was missing ssl: true and ssl_only: true under the related location (devops-alldomains-ssl-loc), second was that I had to set both listen_port: '443' and ssl_port: '443' under the server directive. I have also changed names of locations, but it didn't seem to do any problems (or resolving something).
To make this complete, here are versions of tools used:
Puppet: 4.10.9
Hiera: 3.3.2
Nginx: 1.12.2-1~xenial
puppet/nginx (forge module): 0.9.0
Thank you for your help. I very appreciate it!