Cuidado con las fiestas anti-reaching/olvida que este artículo está escrito por gente común: no se proporciona el código fuente del proyecto, pero brinda ideas. ¡pensamiento independiente! ¡pensamiento independiente! ¡pensamiento independiente! El proyecto de referencia se coloca al final, y es más eficiente seguirlo que extraer el código fuente directamente. Rocíe/no quiera usar Heroku, haga clic en la esquina superior derecha. Esto se implementa en Heroku (usaré 0-0), ¡no rocíe si no le gusta!
¡Vámonos~!
Regístrate en Heroku
En primer lugar, necesita navegar científicamente en Internet.
En segundo lugar, necesita un buzón de correo de Outlook o un buzón de Google. Lo mejor es usar Outlook porque el registro no verificará la ubicación del número de teléfono móvil.
Surge la primera pregunta, una incógnita. aparece una pregunta y luego se niega, porque la verificación del robot no muestra una imagen, por defecto usted es Robot. ¡
Esto se debe a la falta de complementos, que deben instalarse en el navegador!
Luego, después de que el registro sea exitoso, le enviará un correo electrónico, haga clic en el enlace para verificar y luego inicie sesión
Aquí Heroku ha cancelado el servidor gratuito, y se debe vincular una tarjeta de crédito VISA para crear un proyecto de aplicación de servidor.Después de la creación, viene con un nombre de dominio del sitio web , que se puede modificar.
La interfaz es la siguiente
(Si no tienes una, encuentra Taobao (no recomendado) o solicita una tarjeta secundaria a nombre de tus padres)
Modificar el código base
Para el proyecto escrito por mí mismo, si los extremos frontal y posterior están separados, arrastre el extremo frontal (cliente) a la carpeta del extremo posterior (api). Si la operación de seguimiento no se puede realizar arrastrando y soltando, cambie los permisos
, vaya directamente a la carpeta del cliente para cambiar los permisos, y cualquiera en el grupo de seguridad El usuario tiene control total.
Preste atención a los archivos modificados en la API de backend, principalmente estos dos package.json e index.js
paquete.json nodem->nodo más nuevo script heroku-postbuild
"name": "api",
"homepage": "获得的网址",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js",
"heroku-postbuild": "cd client && npm install && npm run build"
}La ruta del recurso index.js no debe escribirse incorrectamente, solo escríbalo aquí o no se encontrará el recurso y la página estará en blanco
app.use(express.static(path.join(__dirname,'/client/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname+'/client/build/index.html'));
});
app.listen(process.env.PORT || 5000,async ()=>{
console.log("Backend is running-")
})Agregue config.js en la carpeta del cliente
Después de escribir una nueva ruta axios, axiosInstance reemplazará todos los lugares donde se usó originalmente axios. La modificación aquí debe cambiarse por completo en el código, y también se reemplaza el lugar donde se usa el servidor local http://localhost:5000 con la nueva URL.
import axios from "axios";
export const axiosInstance = axios.create({
baseURL:"新的网址"
})También evita que la página en blanco vuelva a aparecer
Agregue <script type="text/babel"></script> en client/public/index.html
<script type="text/babel"></script>
<noscript>You need to enable JavaScript to run this app.</noscript>despliegue oficial
Instale git. Si no lo tiene instalado, debe instalarlo. No importa si no tiene una cuenta de github. Aquí hay un enlace local al Heroku remoto
para instalar Heroku. Lo mejor es use el instalador directamente, con la menor tasa de error.Sitio web oficial
Comience a crear un repositorio de código local
git init
git add .
git commit -am "1234" //当代码有变化的时候保存之后再用这个重新提交 必须命名commit不然提交失败Operación Heroku
登录 输入Heroku注册时使用的 邮箱 密码
heroku login -i
远程连接你的app
heroku git:remote -a 创建的app名字
推送代码部署
git push heroku masterVale la pena mencionar que si el almacén local se establece después de establecer la conexión de la aplicación, luego se elimina el almacén local y se crea un nuevo almacén, no podrá conectarse a la aplicación remota conectada previamente. ¡Oh, 0-0! Debido a que está vinculado a uno de forma predeterminada, no se cambiará. ¡Elimine el proyecto de la aplicación y vuelva a intentarlo!
Comenzó a aparecer una larga lista de mensajes de aviso
No importa, mira el letrero de abajo
Cuando vea correctamente y muestre la URL, la compilación es correcta, pero es posible que la implementación no lo sea. Tal vez el backend sea exitoso, pero el enlace del frontend no puede conectarse a la ruta del recurso. Ver uso de error aquí
heroku logs --tail 
También hay una pregunta para hacerle a Google Baidu. En la actualidad, ¡las trampas que he encontrado son realmente mala suerte 0-0!
¡Finalmente arrojado hasta marearse, y finalmente mostró con éxito la interfaz! 0-0 je, je, tanto en casa como en el extranjero pueden visitar...
El precio es de 7 dolares al mes? Aquellos que no tienen dinero y solo quieren hacer una interfaz estática pueden usar Vercel/Render.
¡Mi interfaz de éxito!
Enlace github referenciado/otro enlace referenciado:
- Marco del blog
https://github.com/safak/youtube/tree/mern-blog-app - Candy Crush https://github.com/kubowania/candy-crush-reactjs
- La pelota corre https://github.com/MrLawrence1990/canvas-flappy-bird
- Enviar correo electrónico https://github.com/irenemmassy/send-email-using-nodejs
¡Excepto por Xiaoqiu, hay videos en Youtube! ¡Comuníquese/pague por el reembolso!
Si desea hacer un proyecto completo en el futuro, es mejor encontrar un período de tiempo con mucho tiempo para hacerlo usted mismo. Esta es mi tarea (ya entregada), y no dediqué el tiempo con cuidado. Después de eso, es posible que necesite acceder a API como Netease Cloud y Weather y agregar la función de cifrado y descifrado de contraseña, verificar la entrada de datos y luego prevenir ataques, ¿acceder a una sección completa del juego? O acceda al fondo de carga de archivos .....
Esto es algo para más tarde, pero los proyectos de choque a corto plazo realmente consumen vida, así que no diré mucho, primero me iré a dormir.