We need easier instructions for the migration from buildpack to Nginx.

[andersonar12]

greetings people, well as long as you don't have easier steps to follow to configure the new buildpack for the Heroku stack-22, we will be stuck for this. I would appreciate if you could make some simpler instructions please as we have a Vue app on Heroku with the old stack.

[senolatac]

Here is an example for:
vue + nginx -> https://github.com/senolatac/vue-device-seller/tree/nginx-support
Procfile: dyno over nginx -> web: bin/start-nginx-solo npm run start
migrate static.json to config/nginx.conf.erb
use nginx-buildpack instead of Static HTML

[bradykey]

Here is an example for: vue + nginx -> https://github.com/senolatac/vue-device-seller/tree/nginx-support Procfile: dyno over nginx -> web: bin/start-nginx-solo npm run start migrate static.json to config/nginx.conf.erb use nginx-buildpack instead of Static HTML

This worked like a charm; thanks a bunch for taking the time to share!

The big differences that @senolatac made, that the Replace path logic that previously used mruby with static logic step from the heroku-buildpack-static instructions doesn't talk about is:

1. You need a new Procfile

   web: bin/start-nginx-solo npm run start
   

2. The server { tag that comes from the cat config/nginx.conf output can be replaced with (see my added NOTE: additions):

   server {
     listen <%= ENV["PORT"] %>;
     charset UTF-8;
     port_in_redirect off;
     keepalive_timeout 5;
     # NOTE: The root needs to be the same root that was used in the static.json file used previously
     root dist;
   
     # NOTE:  I commented this out; @senolatac has it in theirs.
     #resolver 10.1.0.2 8.8.8.8;
   
     # Allow payloads of up to 10mb
     client_max_body_size 10M;
   
     # Redirect all non-https traffic to https
     if ($http_x_forwarded_proto != "https") {
       return 301 https://$host$request_uri;
     }
   
     location = /index.html {
       add_header Cache-Control "no-store, no-cache";
       add_header Strict-Transport-Security "max-age=31536002;";
       add_header X-Content-Type-Options "nosniff";
       add_header X-XSS-Protection "1; mode=block";
       add_header Content-Security-Policy "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';";
   
       try_files $uri $uri/ =404;
     }
   
     location / {
       add_header 'Cache-Control' "public, max-age=3600";
   
       try_files $uri $uri/ /index.html;
     }
   
     location /manifest.json {
       add_header Cache-Control "no-store, no-cache";
       add_header Access-Control-Allow-Origin "*";
   
       try_files $uri $uri/ =404;
     }
   
     # Cache assets for a long time, since all of them get unique names on each build
     location ~ ^/assets/[^/]*$ {
       add_header Cache-Control "public, max-age=31536000";
       add_header Access-Control-Allow-Origin "*";
   
       try_files $uri $uri/ =404;
     }
   
   
     # Need this b/c setting $fallback to =404 will try #{root}=404 instead of returning a 404
     location @404 {
       return 404;
     }
   }
   

[chrissyast]

Use your project's existing configuration.
To find the NGINX configuration generated by the heroku-buildpack-static you can run:

  ```
    $ heroku run bash
   ~ $ bin/config/make-config
   ~ $ cat config/nginx.conf
  ```

 These commands will output your current NGINX config generated from your `static.json` contents.

  - Write these contents to your local repo at `config/nginx.conf.erb`, commit them to git.

Following up to this part ok

  - Replace path logic that previously used `mruby` with static logic.

Huh?? What is static logic?