Орналастырғаннан кейін 404 қателерін түзету жолы

Егер қолданба жергілікті жерде жұмыс істейтін болса, бірақ орналастырғаннан кейін беттер 404 беретін болса, ең жиі себебі — бір беттік қолданба (SPA) бағыттауының жоқтығы: сервер /dashboard деген файлды іздейді, ол жоқ, себебі бұл маршрут тек JavaScript ішінде бар. Түзету — қолданба маршруттарына index.html беретін қайтару ережесі. Басқа себептер: құрастыру нәтижесінде жоқ файлдар, регистрге сезімтал жолдар, соңғы слеш айырмашылықтары, дұрыс емес base path және ешқашан орналастырылмаған API маршруттары.

Алдымен нақты қай URL 404 беретінін және сол бетке қалай келгеніңізді жазып алыңыз. Үлгі себепті тікелей көрсетеді.

1-қадам: Үлгіні табыңыз

Нақты статус кодын көру үшін даму құралдарын ашыңыз (тінтуірдің оң жағы → Inspect), Network қойындысына өтіңіз, қайта жүктеңіз және бірінші сұраудың мәртебесін қараңыз.

2-қадам: SPA қайтаруын қосыңыз

Бұл классикалық жағдай. React, Vue немесе Svelte бір беттік қолданбада серверде тек бірнеше нақты файл бар: index.html және кейбір JavaScript және CSS. /dashboard немесе /projects/42 сияқты маршруттарды браузердегі роутер өңдейді.

• Сілтемені басу жұмыс істейді: роутер URL-ді өзгертеді және жаңа бетті серверді сұрамай салады.
• Жаңарту немесе тікелей ашу істемейді: браузер серверден /dashboard сұрайды, сервердің мұндай файлы жоқ, ол 404 қайтарады.

Түзету — ереже: сұрау нақты файлға сәйкес келмесе, index.html мәртебесі 200 болып қайтарылсын, ал роутер қалғанын өңдесін. Оны қалай қосу хостқа байланысты (ағымдағы құжаттарды тексеріңіз, өйткені нұсқаулар өзгереді):

Ереженің нақты файлдарды жұтып қоймауын қадағалаңыз: /assets/app.js сұрауы JavaScript файлын қайтаруы керек. Егер ол index.html қайтарса, бос бет және «Failed to load module script» қатесі шығады. Қараңыз: ақ бос бетті түзету.

Сондай-ақ роутерде catch-all маршрут болсын, сонда бар беттерге сәйкес келмейтін URL-дер бос экран емес, достық «Бет табылмады» көрсетсін.

Сервер баптауларын өзгерте алмасаңыз, hash бағыттау (/#/dashboard тәрізді URL-дер) мәселені болдырмайды, өйткені # кейінгі бөлікті сервер ешқашан алмайды. Бұл бірінші таңдау емес, айналма жол: URL-дер қолайсыздау және іздеу жүйелеріне аз ыңғайлы.

Беттерді серверде көрсететін немесе құрастыру кезінде генерациялайтын фреймворктер (Next.js, Astro және ұқсастары) әр бет үшін нақты файлдар немесе серверлік маршруттар береді, сондықтан бұл мәселе сонда азырақ кездеседі. Олардың баламасы — құрастыру кезінде генерацияланбаған бет.

3-қадам: Нақты не орналастырылғанын тексеріңіз

Егер барлығы 404 берсе, сервер құрастырылған қолданбаны көрсетпейді.

• Дұрыс папка. Хост құрастыру нәтижесін (Vite үшін әдетте dist, Create React App үшін build, статикалық Next.js экспорты үшін out) жариялауы керек, жоба түбірін емес.
• Құрастыру орындалды. Орналастыру логын оқыңыз. Құрастыру сәтсіз болса, хост ештеңе орналастырмаған немесе ескі нұсқаны орналастырған болуы мүмкін.
• index.html жарияланатын папканың үстіңгі деңгейінде болуы керек, ішкі папкада емес.
• Base path сәйкес келеді. Қолданба example.com/app/ мекенжайында қызмет етсе, оны сол base-пен құрастыру керек (Vite-тің base, React Router-дің basename), әйтпесе әр маршрут пен ресурс сәйкессіз болады.

4-қадам: Жоқ файлдар мен дұрыс емес жолдарды түзету

Беттер жүктеледі, бірақ ресурстар 404 берсе:

• Регистр. macOS және Windows әдетте Logo.png пен logo.png-ді бір файл деп санайды. Көп Linux серверлері олай емес. Әр сілтеме нақты файл атымен дәл сәйкес келуі керек.
• Құрастырудан тыс файлдар. Vite-те public/ ішіндегі файлдар өзгеріссіз көшіріледі де түбірден сілтеме жасалады (/logo.png). Кодта импортталған файлдар бумаланады. Жобадағы басқа жердегі файл мүлде орналастырылмауы мүмкін.
• Салыстырмалы жолдар. images/photo.jpg ағымдағы URL-ге қатысты шешіледі, сондықтан /blog/post-1 бетінде бұзылады. /images/photo.jpg пайдаланыңыз.
• Жүктелген файлдар жергілікті дискіде сақталған. Егер пайдаланушылардың жүктеулері серверде өз папкасына жазылған болса, жаңа нұсқа орналастырылғанда олар жоғалады. Тиісті файл сақтауды пайдаланыңыз.

5-қадам: Соңғы слешті біркелкі өңдеңіз

/about және /about/ — әртүрлі URL-дер. Хосттар слешті қосуы немесе алып тастауы бойынша ерекшеленеді, ал сілтемелеріңіз бен роутеріңіздегі сәйкессіздік 404 немесе қайта бағыттау циклын тудыруы мүмкін. Бір стиль таңдаңыз, сілтемелеріңізді соған сәйкестендіріңіз және хостты екінші түрін біріншісіне қайта бағыттауға баптаңыз. Бұл іздеу жүйелеріне де көмектеседі, әйтпесе олар әр беттің екі данасын көреді.

6-қадам: 404 беретін API маршруттарын түзету

Бет жүктеледі, бірақ Network қойындысында /api/... сұраулары 404 көрсетсе:

• Бэкенд орналастырылмаған. Статикалық хост тек файлдарды қызмет етеді; бэкенд басқа жерде іске қосылуы керек.
• Жолдар өндірісте басқаша бағытталған. Дамуда прокси /api-ді бөлек серверге жіберуі мүмкін. Өндірісте хостта баламалы rewrite керек, немесе фронтенд API-дің нақты мекенжайын шақыруы керек.
• SPA қайтаруы оны ұстап алды. index.html-ді 200 мәртебесімен қайтаратын API сұрауы қайтару ережесі тым кең дегенді білдіреді. Оны /api/* үшін алып тастаңыз.

Жарияланған қолданбаның /api/orders сұраулары 404 береді, бірақ превьюде жұмыс істейді. Превьюде және жарияланған қолданбада /api қалай бағытталғанын тексеріңіз және жарияланған фронтенд бэкендке дәл сол жолмен жетуін қамтамасыз етіңіз.

7-қадам: Ескі URL-дерді қайта бағыттау

Басқа сайттан көшсеңіз немесе құрылымды өзгертсеңіз, адамдар мен іздеу жүйелері әлі пайдаланатын ескі URL-дер 404 береді. Әр ескі URL-ден жаңа мекенжайына 301 (тұрақты) қайта бағыттау қосыңыз. Тізім жасап, іске қосқаннан кейін үлгі бойынша тексеріңіз. WordPress сайтын көшіру тізімді қалай жасау керектігін қамтиды.

8-қадам: Доменді тексеріңіз

Егер қолданба хосттың мекенжайында жұмыс істесе, бірақ теңшелген доменде 404 берсе, домен дұрыс емес жобаға нұсқап тұрған болуы мүмкін, немесе хост доменді сайтыңызға әлі қосқан жоқ. DNS жазбаларын және хосттың домен баптауларын тексеріңіз. Қараңыз: теңшелген доменді қалай қосу керек.

Нақты 404 бетін пайдалы етіңіз

Кейбір 404-лер дұрыс: біреу URL-ді қате жазған. Сол бетті көмекші етіңіз:

• Қысқа хабарлама және басты бетке және негізгі бөлімдерге сілтеме
• Сайтта іздеу бар болса, іздеу өрісі
• Сайттың басқа бөліктерімен бірдей тақырып және навигация

Баптауыңыз рұқсат ететін жерде болмайтын беттер үшін нақты 404 мәртебесін қайтарыңыз. Мәртебесі 200 болып қайтарылған «табылмады» хабарламасын іздеу жүйелері soft 404 деп атайды, ол сканерлеу уақытын босқа жұмсап, индекстеуді шатастыруы мүмкін.

Жиі кездесетін қателер

• Тек басу арқылы тексеру. Әрқашан терең URL-ді жаңа қойындыға қойып, жаңартып тексеріңіз.
• Бәрін ұстап алатын ереже. Ресурстар мен API маршруттары index.html қайтарады, бұл бос беттерге және шатастыратын API қателеріне әкеледі.
• Тек серверде бұзылатын регистр сәйкессіздігі.
• Бастапқы код папкасын орналастыру құрастыру нәтижесінің орнына.
• URL-дерді қайта бағыттаусыз қайта құру. Әр ескі сілтеме 404-ке айналады.

Mythex-тегі 404-лер

Mythex-те жұмыс кеңістігінен жариялайсыз, ал статикалық фронтенд статикалық сайт ретінде орналастырылады. Жарияланған бет 404 берсе, агентке дәл URL-ді, ол жаңартқанда немесе басқанда пайда болатынын және Network қойындысының не көрсетіп тұрғанын беріңіз, және бағыттауды тексеруін сұраңыз. Түзеткеннен кейін қайта жариялаңыз, өйткені тірі қолданба жаңартылғанша суреттей болады. Жобаны жақында өзгерткен болсаңыз және тірі сайт ескі көрінсе, қайта жариялап, бетті қатты жаңартыңыз. Құрастыру сәтсіз болса, жариялау диалогындағы Fix with AI пайдаланыңыз. Құжаттардан қалай жариялау керек және жариялау ақаулықтарын түзету бөлімдерін, ал біздің AI құрастырған қолданбаны түзету нұсқауын қараңыз.

404 тексеру тізімі

• Нақты қай URL-дер 404 беретіні жазылған және ол басу, жаңарту немесе екеуінде де болатыны белгілі
• SPA қайтаруы қолданба маршруттарына мәртебесі 200 болған index.html береді
• Қайтару нақты файлдарды және /api/* сұрауларын қоспайды
• Роутерде бар бетке сәйкес келмейтін catch-all «табылмады» маршруты бар
• Жарияланатын папка — құрастыру нәтижесі, және құрастыру сәтті аяқталды
• Base path қолданба қызмет ететін орынға сәйкес
• Файл атының бас әріптері әр сілтемеге сәйкес
• Ресурс жолдары / ішінен басталады
• Соңғы слеш стилі біркелкі
• API маршруттары өндірісте орналастырылған және бағытталған
• Ескі URL-дерге 301 қайта бағыттаулар бар
• Терең сілтемелер жаңа қойындыға қойып тексерілді

Сұрақтар