本地项目上线流程

分手后的思念是犯贱 2023-07-07 08:39 10阅读 0赞

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

### 新建服务器实例 ###

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

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

![20200222102725702.png][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70][]

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

### 启动服务器 ###

点击启动实例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1][]

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

![20200222104834645.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 3][]

###  配置服务器 ###

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

简述一下Nginx（node在[https://blog.csdn.net/time\_\_\_\_\_/article/details/84565042][https_blog.csdn.net_time_article_details_84565042]有介绍）

下载安装Nginx最新版

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 4][]

### 本地项目打包上线 ###

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

![20200222114007547.png][]

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

![20200222114728961.png][]![20200222114647396.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 5][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 6][]

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

![2020022211592867.png][]

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

### 后端上线 ###

与前端同理

![20200222123423361.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 7][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 8][]

### 线上访问 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 9][]

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

[20200222102725702.png]: https://img-blog.csdnimg.cn/20200222102725702.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200222104511667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200222105936270.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[20200222104834645.png]: https://img-blog.csdnimg.cn/20200222104834645.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200222105744415.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200222111128474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_time_article_details_84565042]: https://blog.csdn.net/time_____/article/details/84565042
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200222112735376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[20200222114007547.png]: https://img-blog.csdnimg.cn/20200222114007547.png
[20200222114728961.png]: https://img-blog.csdnimg.cn/20200222114728961.png
[20200222114647396.png]: https://img-blog.csdnimg.cn/20200222114647396.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020022211484235.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200222115239866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[2020022211592867.png]: https://img-blog.csdnimg.cn/2020022211592867.png
[20200222123423361.png]: https://img-blog.csdnimg.cn/20200222123423361.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200222124131385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200222123905731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200222124319914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70