你辛辛苦苦敲的代码如何让女朋友看到？

作为一个程序员，我认为最激动，最有成就感的一件事情就是将我们日日夜夜敲的项目部署上线，让他人能够使用到我们做的项目。可是作为一个最初级的程序员，只会让自己的代码在自己的电脑上运行。本篇文章就是分享一下，如何将我们日日夜夜，辛辛苦苦敲的代码展现到其他人电脑上给人家看。其实我不求被很多人看到，只需要被自己的女朋友看到就可以。

公网ip和私网ip

我认为在介绍项目部署上线前有必要解释一下公网ip以及私网ip：

• 公网IP：公网IP地址是在互联网上唯一标识一台设备的地址，它可以被全世界的其他设备访问到。公网IP地址由互联网号码分配机构（IANA）分配给各个国家和地区的服务提供商。
• 私网IP：私网IP地址是内部网络中使用的地址，这些地址不会出现在互联网上，而是通过路由器转换为公网IP地址后才能与外部通信。

这也就是为什么我们在我们的电脑上能够运行的项目，就不能通过其他的设备访问的原因，我们通常使用的是私网IP地址，而这个私网IP地址只在这个局域网内有效。例如我们在vue项目中经常用到的：http://localhost:5173 ,只能在我们自己的电脑上看到，如果我们想要让其他人也能够访问我们的应用，我们就需要将它部署到一个具有公网 IP 地址的服务器上。

云服务器基础（可白嫖）

为了能够让其他人也能够访问到我们的应用，我们通常会将它部署到一个具有公网ip地址的服务器上，而云服务器就是我们最好的选择。常见的云服务器提供商包括但不限于 AWS (Amazon Web Services)、Azure、Google Cloud Platform (GCP)、阿里云、腾讯云等。我将以阿里云服务器为例介绍如何将我们的项目部署到云服务器上，让其他人也能访问我们的应用，尤其是自己的女朋友。

1、阿里云服务器的购买或'白嫖'

云服务器我们通常是需要购买的，但是作为一个大学生，是可以白嫖的，因为我现在的使用需求不是很大，所以就小小的白嫖一下啦。打开阿里云的官网阿里云 (aliyun.com)，登录进去（没账号的可以注册哦，可以使用支付宝扫码登录），找到免费试用就可以先试用了，当然大佬也可以直接购买。云服务器ECS试用产品续用 (aliyun.com)

试用前他会给你许多的选择如上图所示，注意，我们在选择产品配置的时候选第二个性能会好一点，操作系统我选择的是linux操作系统，所在地域就选一个离你最近的地域。一定在到期自动释放设置里选择自动释放，防止会造成不必要的扣费，这时候我们就有了一个属于我们自己的云服务器。我们可以到云服务器的控制台去看我们的实例，记得第一次用的时候需要修改一下我们的实例密码。这些还是比较简单的，大家可以去B站上去搜索相关的视频，去跟着操作一下。我这随手推荐一个视频供大家参考。3分钟教你白嫖三个月阿里云服务器_哔哩哔哩_bilibili

2、本地连接到服务器

我们有了云服务器那我们怎么操作它呢？我们要从本地计算机连接到云服务器，通常需要使用SSH（Secure Shell）协议，在这里我们借助Finalshell帮助我们更方便的连接到云服务器，因为它提供了一个简洁的界面来帮助我们管理远程连接。当然你也可以使用xshell，或者其他的模拟器。在这里我就以finalShell为例，因为其他的我也不会！如果对其他的感兴趣的话可以去B站上去搜索相关的教学。FinaShell直接去官网下载安装就好了。安装好后我们直接点击进去就可以看到这个页面，当然刚下载的你们看不到快速连接这个页面哦！这是我之前创建的连接，方便我们下次使用的时候能够快速地连接到我们的云服务器。

我们点击新标签页左边的文件夹，然后选择最左边的文件夹，在弹出的选择页面选择ssh连接。

最后就弹出连接页面，如下：

名称随便填一个，主机就是你的云服务器的公网ip地址，用户名填root，密码就是刚才我们在云服务器那重置的密码，最后点击确定我们的连接就完成了，点击进去就可以看到这样的页面：

(1) 左边部分是服务器的状态区域 ，可以查看CPU和内存的占用率等信息

(2) 右边上半部分是终端区域 ，命令都是在这里输入的

(3) 下半部分是可视化的目录区域，可以直接右键操作文件的增删改查，也可以传输文件

3、宝塔面板帮助我们更方便的完成部署

宝塔面板（Panel.BT.cn）是一款非常流行的服务器管理工具，它提供了一个图形化的界面，使得服务器管理和应用部署变得非常简单。宝塔面板支持多种操作系统，包括CentOS、Debian、Ubuntu等，并且支持一键安装和管理Web服务器、数据库、邮件服务器等组件。

我们从浏览器进入宝塔官网，直接复制这条命令到我们的FinalShell中运行这段代码，等待几分钟他就帮我们安装好了宝塔。

安装好后，终端会给你一个外网访问面板的地址，因为我这使用过，可以直接使用bt 14命令，来查看这个地址，我们拿着这个地址就可以在浏览器中打开面板了。里面遇到注册什么的注册一下就可以了，我就不细讲了，我相信你们没什么问题。

我们使用外网的ip地址打开宝塔面板，见到如此的页面：

到这里第二部分其实就结束了，接下来我们就可以部署我们的项目了。

项目部署上线，让你的小baby看到你的成果。

由于我在这里想要部署的是一个全栈的项目，需要上传数据库，node文件以及vue的打包文件，需要下载这些软件，你们可以直接到软件商店那里下载：mysql版本最好新一点，当然也可以在用到的时候去下载，例如我们要上传数据库文件时点到左侧的数据库，他就会提示我们下载，要上传node文件时，直接点击网站，node，也会提醒我们下载，要上传vue的文件时，点击网站的php也会提醒我们下载。

1. 首先我们先上传我们的数据库文件

将数据库上传要保证添加的数据库与我们在后端连接的数据库要一样，尤其是数据库名称这里，宝塔面板不支持大写，所以如果后端是大写的要记得修改一下哟！所以为了方便我们后续的修改操作，我们一般把数据库连接单独封装一下。我这里的数据库名还是没有修改前的！！！

后端的数据库：

添加好数据库后我们就导入我们本地的数据表就OK了，也许需要导入两次才能成功。

2. 上传后端的node文件

我们刚刚只不过是把我们的数据库上传上去了，接下来我们就需要上传我们的node文件了。在此之前，为了方便我们后面的操作，我们点击文件将我们的本地的后端文件上传服务器上。

然后点击网站的node，点击添加node项目，进行添加，选择该开始的文件目录，启动项选择自定义启动项，并且输入你的启动命令，例如你在后端启动时需要输入node index.js 就在此处填写这个。 包管理器选择npm，node版本选择较新的就可以了，其他的就不需要管了。点击确定就添加好了，并帮你启动了。如果没有启动的话，说明你后端的代码有点问题，可以根据启动失败的错误信息，去寻找相应的错误。不过很少出现这种情况，我之前出现了没有启动的情况是不知道什么时候我给加了一行代码，导致出现了问题。

此时我们后端的项目已经上线了，可以提前进行检测一下是否上线成功，将前端的发送请求的地址改成公网的地址以及端口号，axios.defaults.baseURL = 'http://118.31.102.198:3000'，去测试一下前端是否能向后端发送请求。如果没有问题的话，就说明我们后端的项目已经上传成功了。

3. 上传前端文件

上传vue文件就比这些后端的要麻烦一点，且听我慢慢道来。vue中提供一个将vue项目打包的命令，npm run build。当这行命令执行完后，他会创建一个dist的文件夹用来存放所有用于部署的静态文件。

打包好后我们选择网站的php项目，因为它比较简单方便。点击添加站点，然后输入里面的必填项，这个域名其实不需要的，可以随便填一个，例如abc.com，这个最后还是要删除的。 而后继续在下面敲我们的公网ip以及想要跑在的端口号，如118.31.102.198:5173 。根目录就选择我们的前端文件想要上传的位置，最后点击确定即可。

点击我们的网站名，删除点我们填写的网站名abc.com,然后往下找到默认文档，在最前面添加一个dist点击保存。最后点击配置文件新增加一个配置，具体的配置内容就是配置网站的根目录，以及首页。具体的配置如下：（注意这是我配置的我的项目所在位置）这个一定要小心点敲，不要忘记了空格或其他的地方。

location / {
        # root定义网站根目录   html   即网页所在目录
        root   /www/wwwroot/notebook/abc.com/dist;
        # index定义网站的首页   html/index.html  表示从左到右查找，如果不存在那就找下面一个文件
	      index dist index.php index.html index.htm default.php default.htm default.html;
        # 避免f5刷新后404
        try_files  $uri  $uri/  /index.html;
    }

最后我们就在这个目录下面添加我们之前打包好的文件dist。这样我们的一个项目就基本上部署好了，最后要记得打开我们宝塔的防火墙以及服务器开放我们相应的端口，例如我在5173端口下运行就打开这个端口就可以了。阿里云我打开了所有的端口为了省事，所以这里就不需要管了。

总结

本篇文章我们就介绍了一下如何将我们的全栈项目上线，里面肯定有许多没讲到的地方，因为我也还是在学习阶段，所以还请各位大佬们海涵，如果大家上线有出现什么问题的话可以在评论区分享一下，万一有大佬愿意在评论区帮我解答呢，是啊吧。上线其实还是很简单的，就那些步骤，多上线几遍就熟悉啦。好啦，我现在拿着我的上线地址去给女朋友玩去了。