nginx में एक मतलब-ढेर आवेदन की सुंदर यूआरएल

Question

(* कुछ टिप्पणियाँ की सिफारिश की है, मैं index.ejs हटा दिया और निम्नलिखित this answer द्वारा परियोजना में index.html का उपयोग करें। इसलिए मैं अपने ओ पी * समायोजित किया है)

मैं के साथ मैक में विकसित apache एक मीन-स्टैक एप्लिकेशन जिसे https://localhost:3000/#/home द्वारा अनुरोध किया जा सकता है। nginx सर्वर के साथ उत्पादन में, आवेदन https://www.myapp.io/#/home द्वारा अनुरोध किया जा सकता है। angular ui-router के कारण सभी मामलों में खंड-पहचानकर्ता # आवश्यक है।

तो मैं # (उदाहरण के लिए, https://www.myapp.io/home, https://localhost:3000/home) के बिना सुंदर यूआरएल बनाना चाहता था। मैंने निम्नलिखित किया है:

1) $locationProvider.html5Mode(true); $locationProvider.hashPrefix('')app.config(['$stateProvider'... में जोड़ा गया।

2) <base href="/" />https://www.myapp.io/#/home के लिए ब्राउज़र बार में https://localhost:3000/home को index.html

में जोड़ा नतीजतन, https://localhost:3000/#/home परिवर्तन स्वचालित रूप से, इसी तरह।

हालांकि, सीधे ब्राउज़र एक त्रुटि बढ़ायेगा https://localhost:3000/home या https://www.myapp.io/home में प्रवेश (मैं कैसे error.html को error.ejs में पिछले <h1><%= message %></h1><h2><%= error.status %></h2><pre><%= error.stack %></pre> चालू करने के लिए पता नहीं है, इसलिए मैं और अधिक विवरण की जरूरत नहीं है)।

तो अब, लक्ष्य https://localhost:3000/home और https://www.myapp.io/home कार्य करना है।

app.use('/js', express.static(__dirname + '/js')); 
app.use('/dist', express.static(__dirname + '/../dist')); 
app.use('/css', express.static(__dirname + '/css')); 
app.use('/partials', express.static(__dirname + '/partials'));  
app.all('/*', function(req, res, next) { 
    res.sendFile('index.html', { root: __dirname }); 
}); 

और mac की apache में, यहाँ मेरी httpd-vhosts.conf है, को पुन: प्रारंभ apache, https://localhost:3000/home अभी भी एक त्रुटि देता है के बाद:

निम्नलिखित this thread, मैं app.js को इस प्रकार जोड़ा।

<VirtualHost *:443> 
    ServerName localhost 
    DocumentRoot "/Users/SoftTimur" 

    SSLEngine on 
    SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL 
    SSLCertificateFile /etc/apache2/ssl/localhost.crt 
    SSLCertificateKeyFile /etc/apache2/ssl/localhost.key 

    <Directory "/Users/SoftTimur"> 
     RewriteEngine on 

     # Don't rewrite files or directories 
     RewriteCond %{REQUEST_FILENAME} -f [OR] 
     RewriteCond %{REQUEST_FILENAME} -d 
     RewriteRule^- [L] 

     # Rewrite everything else to index.html to allow html5 state links 
     RewriteRule^index.html [L] 

     Options Indexes FollowSymLinks 
     AllowOverride All 
     Order allow,deny 
     Allow from all 
     Require all granted 
    </Directory> 
</VirtualHost> 

उत्पादन में, यहां nginx सर्वर ब्लॉक है। Nginx को पुनरारंभ करने के बाद, https://www.myapp.io/home अभी भी एक त्रुटि देता है।

server { 
    listen 443 ssl; 

    server_name myapp.io www.myapp.io; 

    ssl_certificate /etc/letsencrypt/live/myapp.io/fullchain.pem; 
    ssl_certificate_key /etc/letsencrypt/live/myapp.io/privkey.pem; 

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
    ssl_prefer_server_ciphers on; 
    ssl_dhparam /etc/ssl/certs/dhparam.pem; 
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:EC$ 
    ssl_session_timeout 1d; 
    ssl_stapling on; 
    ssl_stapling_verify on; 
    add_header Strict-Transport-Security max-age=15768000; 

    index index.html; 

    root /opt/myapp 

    location/{ 
     try_files $uri $uri/ /index.html; 
    } 

    location ~ /.well-known { 
     allow all; 
    } 

    location/{ 
     proxy_set_header Host    $host; 
     proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for; 
     proxy_set_header X-Forwarded-Proto $scheme; 
     proxy_set_header Accept-Encoding  ""; 
     proxy_set_header Proxy    ""; 
     proxy_pass   https://127.0.0.1:3000; 

     # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove sock$ 

     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection "upgrade"; 
    } 
} 

क्या कोई मदद कर सकता है?

Answer 1

आपके द्वारा जोड़े गए nginx कॉन्फ़िगरेशन को हटाएं। इसे निम्नलिखित करके हासिल किया जा सकता है:

2 चीजें करने की आवश्यकता है।

1. कॉन्फ़िगर $ locationProvider

2. संबंधित लिंक्स

के लिए हमारे आधार की स्थापना कैसे यह पूरा करने के बारे में विस्तृत निर्देशों के लिए नीचे दिए गए लिंक देखें: Pretty URLs in AngularJS: Removing the #

कोणीय 1.6 के लिए आपको हैशप को बदलने की भी आवश्यकता होगी Refix:

appModule.config(['$locationProvider', function($locationProvider) { 
$locationProvider.html5Mode(true); 
$locationProvider.hashPrefix(''); 
}]); 

मैं आपके सवाल का आप ने कहा कि आप पहले से ही इन दो चरणों किया था में पता है, लेकिन अगर आप इस ट्यूटोरियल का पालन पूरी तरह से यह के रूप में मैं अपने खुद के कोणीय आवेदन पर यह परीक्षण किया है (जो भी होस्ट किया गया है काम करेंगे nginx के माध्यम से)।

सर्वर विन्यास मार्ग के साथ जाने के लिए, मैं इस लिंक के माध्यम सिफारिश करेंगे: AngularJS with Pretty URLs: Removing the # in Amazon S3

साथ ही, here बनाने के लिए वास्तविक सर्वर विन्यास बदलाव है।

और आखिरकार, मुझे लगता है कि आप इस बात के बारे में गलत हैं कि ejs कैसे काम करता है। इसके लिए या तो HTML बूटस्ट्रैपिंग की आवश्यकता होती है (आखिरकार, आपके पास <script src="https://npmcdn.com/ejs/ejs.min.js"></script> जैसे कुछ के साथ index.html का कुछ प्रकार होना चाहिए), या सर्वर पर प्रसंस्करण (उदा।, नोडजेस और/या दोस्तों के साथ)।

Answer 2

मुझे लगता है कि आपको बेहतर सवाल पूछना चाहिए कि आपके पास index.html क्यों नहीं है? शायद मैं बहुत लंबे समय तक सो रहा हूं, लेकिन ब्राउज़र एक HTML दस्तावेज़ से अंतर्निहित DOM के बिना, वेबपृष्ठ पर स्वयं जावास्क्रिप्ट को निष्पादित करने में सक्षम नहीं हैं।

एक बार जब आपको यह पता चला है, तो आप गिटहब पर कोणीय-ui से आधिकारिक कॉन्फ़िगरेशन सुझाव के साथ भी सफल हो सकते हैं।