서버 설정 예제

Front-End/Vue.js 2019. 12. 30. 08:09

Apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

#nginx

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

#Native Node.js

const http = require("http")
const fs = require("fs")
const httpPort = 80

http.createServer((req, res) => {
fs.readFile("index.htm", "utf-8", (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

res.writeHead(200, {
"Content-Type": "text/html; charset=utf-8"
})

res.end(content)
})
}).listen(httpPort, () => {
console.log("Server listening on: http://localhost:%s", httpPort)
})

#Express와 Node.js

Node.js/Express의 경우 connect-history-api-fallback 미들웨어를 고려해보세요.

#Internet Information Services (IIS)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
   <rewrite>
     <rules>
       <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
         <match url="(.*)" />
         <conditions logicalGrouping="MatchAll">
           <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
           <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
         </conditions>
         <action type="Rewrite" url="index.html" />
       </rule>
     </rules>
   </rewrite>
     <httpErrors>
         <remove statusCode="404" subStatusCode="-1" />
         <remove statusCode="500" subStatusCode="-1" />
         <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
         <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
     </httpErrors>
     <modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>

#주의 사항

주의 사항이 있습니다. 여러분의 서버는 404 에러를 보고하지 않을 것입니다. 왜냐하면 모든 발견되지 않은 경로가 이제 index.html 파일을 제공하기 때문입니다. 이 문제를 해결하려면 Vue 앱에서 catch-all 라우트를 구현하여 404 페이지를 표시해야합니다.

const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})