背景

个人开发前端项目，如果想看线上效果没有服务器怎么办？可以买云主机呀~这篇文章主要讲述前端项目如何部署到云主机。

前期准备

首先，需要购买云主机。现在云产品很多，例如:阿里云、华为云、天翼云、腾讯云等等，哪款都可以。设置好云主机用户名和密码，后面登录需要用到。

部署

这里以window操作系统为例。
1.输入win+r,打开运行窗口。输入mstsc，远程连接云主机。

2.输入云主机ip，如下图：

3.点击图2中的“显示选项”，选择“本地资源”，点击“详细信息”。

4.选择本地向云主机发送资源的位置。我选择的是F盘。

5.输入云主机的用户名和密码就可以连接了，进入到云主机的桌面了。
6.下载nginx，下载地址nginx.org/en/download…
下载windows版本，我下载的是1.20.2版本。可以在云主机下载，也可以在本地下载然后通过F盘传输给云主机。我是本地下载的，传输到云主机后解压到C:\nginx\nginx-1.20.2路径下。 7.打包vue3项目，将打包后的dist文件放到第6步路径下的html文件夹下。

8.修改nginx配置，即conf文件夹下的nginx.conf文件。
1）将第一行前的#删除，默认是被注释的，这里要放开。

2）进行主机、路由等设置。

9.启动nginx，点击nginx.exe文件，会看到它一闪而过，这是正常现象哦。如果在任务管理器中能找到它，说明已经正常启动了。
10.在购买的云主机平台，还需要设置入方向端口，大多数平台会默认入方向的端口是关闭的，需要手动开启。此端口号跟nginx.exe中设置的端口号是一致的哈。
以上步骤全部设置好后，在本地浏览器输入http://ip:端口号/ 就可以访问到项目了。

设置开机自启动

通过开源项目Windows Service Wrapper 来实现
1.下载Windows Service Wrapper，下载地址：github.com/winsw/winsw…

2.下载后，放在nginx-1.20.2目录下，重命名为start-nginx.exe。
3.再新建一个txt文件，名字改为start-nginx.xml，注意拓展名前面的名字要保持一致。配置start-nginx.xml如下：

<service> 
    <id>start-nginx</id> 
    <name>start-nginx</name> 
    <description>nginx self starting</description>

    <logpath>C:\nginx\nginx-1.20.2\</logpath>
    <logmode>roll</logmode>
    <depend></depend>

    <executable>C:\nginx\nginx-1.20.2\nginx.exe</executable>

    <stopexecutable>C:\nginx\nginx-1.20.2\nginx.exe -s stop</stopexecutable>

   </service>

4.打开cmd，进入nginx-1.20.2路径，输入start-nginx.exe install。
5.设置开机自启动。打开任务管理器，选择“服务”，找到start-nginx.xml中设置的name对应的服务，右键选择开始。

再次点击右键，选择“打开服务”，找到start-nginx，查看启动类型是否为自动，右键选择属性可以设置启动类型。

到此，开机自启动设置完成。

总结

第一次将项目部署到云主机，收获还是挺大的。记录下自己的操作步骤，希望可以帮助到有同样需求的小伙伴，如果有问题，也请大家指正。