Swift写服务端二：Linux安装Nginx跑第一个Vue程序

Swift写的服务端只是提供了数据的接口，页面我使用的是Vue编写，web服务器使用的是Nginx。

1.创建一个Vue项目

使用vue cli创建出一个项目。

vue create sample-code

2.打包vue初始项目

使用vs code打开vue项目，然后执行npm run build打包项目。

image.png

最终生成前端代码如图所示。

image.png
这是后面Nginx搭建好后，使用的前端页面。

3.安装Nginx

sudo apt update
sudo apt install nginx

安装完毕后，执行如下命令运行nginx服务器

sudo systemctl start nginx

此时，访问服务器，就能看到结果了。

image.png

更多命令

启动：systemctl start nginx
重启：systemctl restart nginx
关闭：systemctl stop nginx
查看状态：systemctl status nginx
开启开机自动启动：systemctl enable nginx
关闭开机自动启动：systemctl disable nginx
刷新nginx配置：nginx -s reload
测试nginx配置：nginx -t
关闭所有跟nginx相关进程：pkill -9 nginx
查看跟nginx相关进程：ps aux | grep nginx

4.配置nginx

用vim进入nginx配置文件/etc/nginx/nginx.conf
在http中加入如下内容：

http {
  server {
        listen 80; // 端口
        server_name 11.11.11.11; // 服务器地址
        location / {
            root /root/dist; // 网页存放路径
            index index.html index.htm; // 跳转的页面
            try_files $uri $uri/ /index.html; // 其它请求跳转的页面
        }
    }
  ......
}

同时，最上方的user修改成root。这个得看自己的网页是存放在哪个用户的文件夹下的，然后根据实际情况修改，我是直接放root用户下的，所以这里得改成user root。

user root;

• 这里特别提醒一下，如果说这里设置的用户和网页目录的权限不匹配，会出现Permission denied的情况。
  修改好后，启动nginx。

systemctl start nginx

5.访问服务器

访问服务器地址，就能看到默认的vue页面了。

image.png