本地项目上线流程

最新推荐文章于 2024-10-16 16:12:43 发布
原创 最新推荐文章于 2024-10-16 16:12:43 发布 · 1.3k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #后端

以下是自己一个项目的本地上传至线上的总结

新建服务器实例

首先，你需要在各大云服务器平台选购一台合适的服务器

这里我选用的是阿里云（window2008 server版）

为什么系统选2008而不是2012版？

因为2008相对于2012占用的资源较少，当然如果你服务器配置高的话，就不用担心了

关闭服务器实例后，在服务器选项更多中选择更换系统 

 配置服务器账号密码并等待安装系统

启动服务器

点击启动实例

服务器控制台提供了远程连接实例功能，但是是介于网页版，部分功能及操作还不够全面，所以我们移步到自己电脑自带的远程桌面连接，并记住公网ip地址，用户名及开机密码

 输入ip，用户名，密码点击连接

 配置服务器

开机后，就可以直接开始配置node，Java，Nginx之类的了

简述一下Nginx（node在https://blog.youkuaiyun.com/time_____/article/details/84565042有介绍）

下载安装Nginx最新版

在目录nginx-1.15.8\conf\下找到nginx.conf文件，用编辑器打开，为自己的项目添加代理（这里我用的是Vue，端口号2048，root是Nginx主目录下一级文件名，index是vue文件夹下的入口页面）

本地项目打包上线

其实这个过程就是把本地请求的url改成服务器私有ip地址

 

 这里有一个服务器需要配置安全组，目的是为了开放接口以供调用，否则刚才配置的2048端口号无法访问

之后将本地项目baseurl修改为服务器私有ip地址

之后使用npm run build将项目打包在build文件夹中生成了打包后文件

复制文件夹到Nginx主目录下命名为vue

后端上线

与前端同理

将项目上传至服务器后运行（这里我是nodejs，所以切换到项目目录下运行node server）

在Nginx主目录下打开cmd运行start nginx，即可打开Nginx服务器

线上访问

最后在我们浏览器中访问服务器的ip加地址

最后，我们的项目就上传完毕 

java项目上线发布的流程
weixin_43740680的博客
12-11 4715
1.你的java项目（已写好的整套项目文件包括数据库文件），项目的环境部署的工具。 2.购买云服务器(ECS) 链接：https://ecs-buy.aliyun.com/，相当于挂在云端的电脑。云服务器厂商有很多，建议选择大公司的比较稳定，如：阿里云，京东云，华为云等。 3.购买后，厂商会发给你服务器的一系列信息，用这些信息远程你的服务器，也可以用你的账号管理你的服务器开放端口之类的。 4.在服...
SpringBoot项目上线运维
qq_43456605的博客
11-19 1757
springBoot高级属性配置 SpringBoot多环境开发 SpringBoot日志管理
项目上线整体流程
主要发布一些日常学习代码及理解
11-24 8902
上线流程整体步骤
如何将本地 Node.js 服务部署到宝塔面板：完整的部署指南
宇珩的博客
10-16 4601
简易地将本地运行的node服务上线到公网
HTTPS上线过程说明
weixin_33910137的博客
02-23 426
2019独角兽企业重金招聘Python工程师标准>>> ...
GIT模拟上线流程案例
wilson_hj的博客
10-14 1041
master 正式站分支 release-... 测试站分支 LINUX下 51pifa 正式站目录，当前分支必须master必须保证只有一个master分支，除项目负责人不能在此目录下进行git操作 51pifa_test 测试站目录，当前分支必须为release-... 51yanjing 正式站目录，当前分支必须master必须保证只有一个master分支，
新手将本地项目部署到线上服务器（包含域名、服务器购买！域名绑定服务器等细节。个人总结！勿喷）...
weixin_30401605的博客
09-26 709
　　学习PHP不久之后，都会经历这样的过程：想把自己做好的项目，比如说自己的博客等放到线上。对于新手来说可能还是有些人会花费很多时间才能完成！所以总结一下自己的心得。 　　第一步：购买域名。比较简单，我都是在某网买。购买就不详细说了，百度一下域名购买就有流程了。 　　第二步：购买服务器（虚拟主机）。因为我感觉备案比较麻烦（个人懒），我就直接在某个平台购买了一个香港虚拟主机。登录平台后等到下面的...
系统上线的步骤
热门推荐
WilianmBlues的博客
10-26 1万+
前期准备： 1、封版的代码，数据库脚本 2、详细的上线方案(代码、数据库脚本、服务器配置、测试数据、上线人员、联系方式) 3、回滚方案(代码的回滚、脚本的回滚) 上线的步骤 1、停止web应用服务器 2、备份线上的源代码(如果增量发布最好备份增量的文件) 3、删除之前发布的系统代码(如果是增量发布，则删除新增的文件) 4、清除缓存 5、上传发布的代码到web服务器指定目录 6、
系统上线步骤
RoseMayZLY的博客
10-26 3173
系统上线的步骤   前期准备： 1、封版的代码，数据库脚本 2、详细的上线方案(代码、数据库脚本、服务器配置、测试数据、上线人员、联系方式) 3、回滚方案(代码的回滚、脚本的回滚) 上线的步骤 1、停止web应用服务器 2、备份线上的源代码(如果增量发布最好备份增量的文件) 3、删除之前发布的系统代码(如果是增量发布，则删除新增的文件) 4、清除缓存 5、上传发布的代码到we
【项目上线】项目上线操作步骤
aaaa_aaab的博客
08-02 2290
项目上线流程操作记录
iOS项目程序上线流程图文详解
01-17
### iOS项目程序上线流程详解 #### 一、前期准备工作 在进行iOS应用的上线之前，我们需要准备以下几项内容： 1. **开发者账号**：确保已经注册并拥有苹果的开发者账号，这是进行应用开发和发布的前提。 2. **发布...
上线流程javaweb
01-13
上线流程 java web 项目
如何将一个下载的基于J2EE的项目在自己的电脑上正常使用
12-10
如何将一个下载的基于J2EE的项目在自己的电脑上正常使用
海外游戏发行上线流程及关键步骤
02-01
### 海外游戏发行上线流程及关键步骤 随着全球化进程的加速，越来越多的游戏开发者和发行商将目光投向海外市场。为了确保游戏能够成功地在海外市场上线并取得良好的表现，了解整个发行流程及其背后的逻辑至关重要。...
项目完整上线流程-后端
weixin_46816552的博客
12-12 707
项目完整上线流程-后端
项目上线-后端api上线
TTST_HTSN的博客
03-15 642
我们在服务器里使用linux系统里面的ubuntn 我们的接口是通过node写的，需要安装node。这里我们使用nvm来安装node版本； 一、要先安装nvm先到根目录下，我们通过wget (w是wei的意思)安装nvm wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 使用这...
怎样将本地仓推送到码云线上
weixin_30284355的博客
06-12 268
怎么把本地项目推送到GitHub或者码云线上呢？来来回回错了很多次，终于总结了正确的步骤。首先注册好github账号，或者码云账号。1.然后建一个自己的本地仓，你可以直接右击新建文件夹，也可以右击打开Git bash命令行窗口通过命令来创建。2.通过命令git init把这个文件夹变成Git可管理的仓库Administrator@QH-20180419EFGP MINGW64 ~/Desktop...
项目快速部署上线
李青水的博客
07-17 1200
本地开发完成的项目，如何部署到线上？
Nginx上线一个项目并简操
锦衣
06-30 6868
Nginx上线一个项目上线一个商场项目第一步：将项目源码和数据库文件上传至html文件中第二步：解压项目源码和导入数据文件第三步：修改Nginx配置文件，配置server 虚拟机第四步：在项目代码文件中配置连接MySQL的用户密码及数据库database.php第五步：把runtime目录的所属关系赋予www用户使用官方默认模块gzip 压缩模块：压缩传输客户端缓存基于IP的访问控制基于用户的访问控制目录列表显示反向代理日志管理访问日志错误日志基于域名日志分割 上线一个商场项目 思路： 上传项目文件和数
windowss前端项目打包上线流程
最新发布
06-30
### 前端项目在 Windows 环境下的打包部署上线流程 #### 1. 项目打包准备 在开始打包之前，确保项目已经完成了所有功能开发，并且测试通过。对于基于 Vue 的项目，通常使用 `npm run build` 或 `yarn build` 来进行打包操作。打包后的文件会生成在 `dist` 目录下，包含 `index.html`、静态资源（如 CSS、JS 文件）以及图片等资源。 - **配置请求前缀和代理规则**：在打包前，需要检查前端项目的 AJAX 请求封装，尤其是请求的前缀是否正确设置。如果项目中使用了 Axios 或其他 HTTP 客户端，确保基础 URL 指向生产环境的 API 地址。 - **处理跨域问题**：在开发环境中，通常通过配置代理来解决跨域问题，但在生产环境中，跨域问题需要通过服务器端的 CORS 配置或 Nginx 反向代理来处理 [^1]。 #### 2. 使用 Webpack 进行打包 如果项目是基于 Webpack 构建的，可以在 `webpack.config.js` 中进行相关配置。以下是一个简单的 Webpack 打包配置示例： ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], devServer: { historyApiFallback: true, proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 运行打包命令后，`dist` 目录将包含所有打包后的文件。 #### 3. 部署到本地服务器 ##### 3.1 使用 Node.js 搭建本地服务器 可以使用 Express 或其他轻量级框架搭建一个本地服务器来测试打包后的文件。以下是使用 Express 的简单示例： ```javascript const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'dist'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); ``` 安装依赖并启动服务器： ```bash npm install express node server.js ``` 访问 `http://localhost:3000` 即可查看打包后的页面。 ##### 3.2 解决刷新 404 问题 当使用 HTML5 History 模式时，直接访问路径可能会导致 404 错误。可以通过配置服务器来重定向所有请求到 `index.html`，从而避免该问题。例如，在 Express 中，可以通过以下方式实现： ```javascript app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); ``` #### 4. 使用 Nginx 部署 Nginx 是一个高性能的 Web 服务器，常用于前端项目的部署。以下是 Nginx 的基本配置步骤： 1. 下载并安装 Nginx（适用于 Windows）。 2. 修改 `nginx.conf` 文件，添加以下配置： ```nginx server { listen 80; server_name localhost; location / { root dist; index index.html; try_files $uri $uri/ =404; } # 反向代理配置 location /api/ { proxy_pass http://backend-server/; } } ``` 3. 启动 Nginx 并访问 `http://localhost` 查看部署效果。 #### 5. 使用 PM2 进行进程管理 PM2 是一个 Node.js 应用程序的进程管理工具，适用于生产环境中的长期运行。以下是使用 PM2 部署前端项目的步骤： 1. 安装 PM2： ```bash npm install -g pm2 ``` 2. 创建一个启动脚本 `server.js`，内容与前面提到的 Express 服务器相同。 3. 使用 PM2 启动应用： ```bash pm2 start server.js ``` 4. 查看应用状态： ```bash pm2 list ``` #### 6. 上线部署注意事项 - **域名绑定与 DNS 配置**：确保域名已正确解析到服务器 IP 地址。 - **SSL 证书配置**：为网站启用 HTTPS，可以使用 Let's Encrypt 提供的免费证书。 - **性能优化**：压缩静态资源、启用缓存策略、使用 CDN 加速等。 - **日志监控**：定期检查服务器日志，确保应用正常运行。 ---
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿宇的编程之旅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值